React Native Flex-Wap不会将文本换行或压扁到屏幕一侧

Question

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>
    )
}

我看到的只有一种解决方案（Ashok的解决方案）似乎会影响文本的包装方式。不幸的是，这个解决方案看起来像是将文本推到左边，这样文本就不会填满屏幕。我尝试了很多调整width:100%，但似乎没有什么帮助。

Answer 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
  }
});

您不需要对文本进行弹性换行。默认情况下，它将包装:)