固定视图宽度的多行文本 - React Native？答案

【问题标题】：Multiline Text in fixed View width - React Native?固定视图宽度的多行文本 - React Native？
【发布时间】：2021-12-02 17:46:20
【问题描述】：

在 Header 组件中，我有一个固定宽度的 View，并且里面的文字被剪掉了，所以我想让这个文字像多行一样，

我无法删除固定宽度，因为它依赖于其他滚动内容。

const TAB_WIDTH = normalizeWidth(150);
<FlatList
            data={myRoutes}
            ref={headerRef}
            contentContainerStyle={{
              flexGrow: 1,
            }}
            keyExtractor={(item, index) => index.toString()}
            horizontal
            showsHorizontalScrollIndicator={false}
            renderItem={({item, index}) => (
              <View
                style={{
                  width: TAB_WIDTH,
                }}>
                <TouchableOpacity
                  onPress={() => scrollToActiveIndex(index)}
                  style={styles.headerItem}>
                  <Text
                    style={[
                      styles.labelStyle,
                      {
                        color:
                          activeIndex === index
                            ? buttonBgColor
                            : COLORS.menuText,
                      },
                    ]}>
                    {item.title}anas
                  </Text>
                </TouchableOpacity>
                {activeIndex === index && (
                  <View
                    style={[styles.headerBar, {backgroundColor: buttonBgColor}]}
                  />
                )}
              </View>
            )}
          />

【问题讨论】：

像这样 - snack.expo.dev/pMt0usoob ？具有固定视图宽度的多行文本

标签： javascript html css reactjs react-native

【解决方案1】：

你可以使用 <Text numberOfLines={2}/>

验证 ellipsizeMode

【讨论】：

【解决方案2】：

我也遇到了同样的错误，我像这样将宽度应用于文本组件

width: 'YOUR WIDTH'

您可以应用此代码

<Text style={[
   styles.labelStyle,
   {
       color: activeIndex === index ? buttonBgColor : COLORS.menuText,
       width: TAB_WIDTH
    },
]}>
   {item.title}anas
</Text>

如果你觉得这有帮助，请评论我。

【讨论】：