在React Native中如何内联显示文本

Question

在React Native中如何内联显示文本

3

有没有办法像图片中那样显示文本？

这是我的当前代码：

render() {
    return (
        <View style={{flex: 1}}>
            <ScrollView scrollEnabled={true}>
                <View style={{ flexDirection: 'row' }}>
                    <Text style={styles.badge}>lorem</Text>
                    <Text style={styles.badge}>lorem ipsum lorem</Text>
                    <Text style={styles.badge}>lorem</Text>
                    <Text style={styles.badge}>lorem ipsum lorem</Text>
                    <Text style={styles.badge}>lorem</Text>
                    <Text style={styles.badge}>lorem ipsum lorem</Text>
                    <Text style={styles.badge}>lorem</Text>
                    <Text style={styles.badge}>lorem ipsum lorem</Text>
                </View>
            </ScrollView>
        </View>
    );
}

const styles = StyleSheet.create({
  badge: { 
    backgroundColor: '#f16622',
    color: '#fff',
    padding: 5, 
    marginRight: 5, 
    alignSelf: 'flex-start', 
    borderRadius: 4 
  }
});

但是我的代码不能像我想要的图片那样显示。它没有把所有内容都显示出来，而是变成了这个样子：

- Emerald

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shivam · Accepted Answer

您需要将子元素包装在View中。使用flexbox，您可以使用flexWrap属性来定义强制将 flex 项放在单行中还是可以换行。默认情况下，它设置为nowrap。将其设置为wrap：将<View style={{ flexDirection: 'row' }}>更改为<View style={styles.badgeContainer}>。

    <View style={styles.badgeContainer}>
       <Text style={styles.badge}>lorem</Text>
       <Text style={styles.badge}>lorem ipsum lorem</Text>
       <Text style={styles.badge}>lorem</Text>
       <Text style={styles.badge}>lorem ipsum lorem</Text>
       <Text style={styles.badge}>lorem</Text>
       <Text style={styles.badge}>lorem ipsum lorem</Text>
       <Text style={styles.badge}>lorem</Text>
       <Text style={styles.badge}>lorem ipsum lorem</Text>
    </View>

尝试将以下样式应用于徽章容器View。

badgeContainer:{
  flex:1,
  flexDirection: 'row',
  flexWrap: 'wrap'
}