react-native - 将文本包裹在视图内而不会溢出

问题描述

我是新来的反应本地人。我正在尝试在视图中设置文本，但文本溢出到视图之外，如下图所示。试过了flexWrap:'wrap，flexShrink:1但它也不起作用。我已经实现如下：

 <View style={styles.container}>
            <FlatList
                data={this.state.data}
                renderItem={({ item, index }) => (
                    <TouchableOpacity onPress={() => navigate('BlogDetails', item)}>
                        <Card style={{flexDirection:'row',flexShrink:1}}>
                            <CardSection>
                                <View style={styles.thumbnailContainerStyle}>
                                    <Image
                                        style={styles.thumbnailStyle}
                                        source={{ uri: item.imagepath }}
                                    />
                                </View>
                                <CardSection>
                                <View style={styles.headerContentStyle}>
                                    <Text numberOfLines={5} style={styles.headerTextStyle}>{item.news_title}</Text>
                                    {/* <Text>{item.blog_description}</Text> */}
                                </View>
                                </CardSection>

                            </CardSection>
                        </Card>
                    </TouchableOpacity>
                )}

                keyExtractor={(item, index) => index.toString()}
            >

            </FlatList>
        </View>

我的风格：

const styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: '#FFF',
    minHeight: 1,
    minWidth: 1,
},
thumbnailContainerStyle: {
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 10
},
headerContentStyle: {
    flexDirection: 'column',
    flexWrap:'wrap',
    flexShrink:1,
    justifyContent: 'center',
    alignItems: 'flex-start'
},
thumbnailStyle: {
    width: 130,
    height: 130,
    resizeMode:"contain"
},
imageStyle: {
    height: 100,
    flex: 1,
    width: null
},
cardStyle:{
     width:'100%',
     height:200,
},
headerTextStyle:{
    fontSize:20,
    flexWrap: 'wrap',
    flexShrink: 1

},
infoText: {
    fontSize: 14
}

});

标签： react-native

react-native - 将文本包裹在视图内而不会溢出

问题描述

解决方案

推荐阅读