动态flex + flexWrap不起作用

Question

我有两个问题：

1. 为什么我的flexWrap不起作用？当文本长度超过父级时，我的文本不会换行以开始换行。
2. 我真的不想为flexCardItem设置1.5的flex值，我希望flex调整为警告消息的长度。我怎样才能做到这一点？我已经尝试将flex设置为0，但不能正常工作

请参阅此处的图片

我尝试使用npm package react-native-easy-grid：

 <CardItem style={{borderBottomLeftRadius: 10, borderBottomRightRadius: 10, backgroundColor: '#fff'}}>
  <Grid>
     <Col>
       <Image style={styles.warning} source={Images.warning} />
     </Col>
     <Col size={3}>
         <Row><Text style={{flex: 1}}>Activity Alert</Text></Row>
         <Row><Text style={{flex: 1, flexWrap: 'wrap'}}>No activity on easy chair for 1 hour or soooo</Text></Row>
      </Col>
   </Grid>
 </CardItem>

我还尝试使用Views：

<CardItem style={{borderBottomLeftRadius: 10, borderBottomRightRadius: 10, backgroundColor: '#fff'}}>
  <View style={{flexDirection: 'row'}}>
    <Image style={styles.warning} source={Images.warning} />
  </View>
  <View style={{flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'flex-start'}}>
    <View style={{flexDirection: 'column', margin: 10, flexWrap: 'wrap'}}>
      <Text style={{flex: 1}}>Activity Alert</Text>
      <Text style={{flex: 1, flexDirection: 'column', flexWrap: 'wrap'}}>No activity on easy chair for 1 hour or soooo</Text>
    </View>
  </View>
 </View>
</CardItem>

两个代码都会产生相同的结果。  是来自原生基础的组件

将carditem包装在组件容器和卡中，并带有以下css：

  container: {
    flex: 1,
    paddingTop: Metrics.titlePadding
  },

  card: {
    backgroundColor: 'transparent',
    borderColor: 'transparent',
    height: 250
  }

Answer 1

问题是您的View容器Text组件的宽度根本不受限制，因此它会扩展到所需的范围，因为这个父级View（特别是它的弹性参数）。试试这个：

<View style={{flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'flex-start'}}>
    <View style={{flexDirection: 'column', flex: 1, margin: 10}}>
        <Text style={{flex: 1}}>Activity Alert</Text>
        <Text style={{flex: 1}}>No activity on easy chair for 1 hour or soooo</Text>
    </View>
</View>

并且您不会将flexWrap用于此目的。 flexWrap定义弹性项是强制保留在一行还是移动到下一行，而不是其内容。如果要控制内容包装，请使用“white-space”css属性。它可能在React中有重复，但我对React tbh并不是很擅长。

至于你的第二个问题，我很难回答，因为我真的不知道你身后发生了什么Card。但是如果你想让它自己调整内容，那么flexbox就不是正确的工具。