react-native - React Native TabNavigator 根据文本更改 TabStyle 以跟随

Question

我正在使用 expo v27.0，反应原生 0.55，正如您在图片中看到的那样，选项卡有一些固定宽度，就像选项卡导航中的默认宽度一样，并且文本换成三行，我希望文本在 1 行中并且没有换行，我已经尝试在 TabStyle 中设置样式（flexWrap：'nowrap'，flex：1），在 TabBarOptions 中设置 LabelStyle，但仍然无法根据标签内的文本使标签具有宽度。

我使用 fetch 从 json 动态填充选项卡的文本，因此所有选项卡将根据文本具有不同的宽度。如何使标签跟随文本的宽度？

非常欢迎所有答案。先感谢您。

Answer 1

解决了，原来只需要将宽度设置为自动如下：

tabBarOptions: {
    tabStyle: {
        width: 'auto'
    }
}

Answer 2

您可以在渲染标题中使用渲染标签，因为您可以返回您的 Text 组件，并且 Text 的numberOfLinesprops 将为 1，并且它将...在一行后的文本末尾添加。

检查示例片段：

_renderLabel = props => {
    let preparedProps = {
      style: {
        fontFamily: fonts.Regular,
        marginVertical: 8
      },
      fontType: props.focused ? "Medium" : "Light"
    };
    return (
      <Text
        {...preparedProps}
        numberOfLines={1}
        ref={ref => {
          ref && this.props.addAppTourTarget(ref, props.route.key);
        }}
      >
        {props.route.type === "free" && this.state.is_premium_member
          ? this.labels.premium
          : props.route.title}
      </Text>
    );
  };
  _renderHeader = props => (
    <TabBar
      {...props}
      bounces={true}
      style={{
        backgroundColor: colors.cardBlue
      }}
      indicatorStyle={{
        backgroundColor: colors.radicalRed,
        height: 1,
        borderRightWidth: initialLayout.width * 0.1,
        borderLeftWidth: initialLayout.width * 0.1,
        borderColor: colors.cardBlue
      }}
      tabStyle={{
        padding: 0,
        borderTopColor: "transparent",
        borderWidth: 0
      }}
      renderLabel={this._renderLabel}
    />
  );
  _handleIndexChange = index => this.setState({ index });
  _renderScene = ({ route, focused }) => {
    switch (route.key) {
      case "a":
        return <One {...this.props} route={route} focused={focused} />;
      case "b":
        return (
          <Two {...this.props} isSeries={true} focused={focused} />
        );
      case "c":
        return <Three {...this.props} route={route} focused={focused} />;
      default:
        return null;
    }
  };