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

Posted 2023-02-22

【中文标题】React Native Flex-Wrap 不会将文本换行或挤压到屏幕的一侧

【英文标题】：React Native Flex-Wrap either won't wrap or squishes text to side of screen

【发布时间】：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% 尝试了很多调整，但似乎没有任何帮助。

【参考方案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。它会默认包装:)