React Native TabNavigator根据文本更改TabStyle

Question

我正在使用expo v27.0，反应原生0.55和我在图片中可以看到标签有一个固定的宽度，如标签导航的默认宽度，文本换成三行，我想要文本在1行和nowrap，我尝试了样式（flexWrap： ＆＃39; nowrap＆＃39;，flex：1）TabStyle，TabBarOptions中的LabelStyle，但仍然无法根据标签内的文字使标签具有宽度。

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

非常欢迎所有答案。 提前谢谢。

Answer 1

解决了，结果只需要将宽度设置为自动，如下所示：

componentDidMount() {
    this.props.dispatch(loadData());
}

Answer 2

你可以在渲染标题中使用渲染标签，并且你可以返回你的文本组件，文本有numberOfLines道具，它将是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;
    }
  };