React Native Flex-Wrap 不会将文本换行或挤压到屏幕的一侧答案

【问题标题】：React Native Flex-Wrap either won't wrap or squishes text to side of screenReact Native Flex-Wrap 不会将文本换行或挤压到屏幕的一侧
【发布时间】：2020-04-17 19:54:35
【问题描述】：

Full Project on Github

我使用 FlatList 从上到下显示一堆视图，其中每一行都有一个图像，旁边有一些文本。这就是视图的样子，注意较长的标题是如何在最后被截断的，而不是换行到下一行。

这是我的行代码。

const styles = StyleSheet.create({
    movieCell:{
        flexDirection: 'row',
        width: '100%'
    },
    cellText:{
//        flex:1,
        flexWrap: 'wrap'
    },
    textWrapper:{
        flexDirection:'row'
    },
    movieImage:{
        width: 50,
        height: 50
    }
})

const MovieCell = (props) => {
    return(
        <TouchableOpacity 
        style={styles.movieCell}
        onPress={someFunction()}
        >
            <Image source={{uri: props.source}} style={styles.movieImage}/>
            <View>
                <View style={styles.textWrapper} >
                    <Text style={styles.cellText}>{props.title}</Text>
                </View>
                <Text>{props.year}</Text>
            </View>
        </TouchableOpacity>
    )
}

似乎只有one solution that I've seen (Ashok's solution) 会影响文本的换行方式。不幸的是，看起来这个解决方案将文本向左推，因此文本不会填满屏幕。我用width: 100% 尝试了很多调整，但似乎没有任何帮助。

【问题讨论】：

标签： javascript react-native flexbox

【解决方案1】：

我认为因为您正在为图像指定宽度，所以它会弄乱 textWrapper 上的 flex。一种解决方案是获取屏幕宽度并减去图像宽度，然后将其用作 textWrapper 的宽度：

import { Dimensions } from 'react-native';

const imageWidth = 50;

const styles = StyleSheet.create({
  movieCell: {
    flexDirection: 'row',
    width: '100%'
  },
  cellText: {
    // flexWrap: 'wrap' // you can remove this
  },
  textWrapper: {
    // flexDirection: 'row', // and this
    width: Dimensions.get('screen').width - imageWidth // <-- add this
  },
  movieImage: {
    width: imageWidth,
    height: imageWidth
  }
});

您不需要在文本上使用 flexWrap。它会默认包装:)

【讨论】：