css - 动态flex + flexWrap无法正常工作

我有两个问题：


为什么我的flexWrap不起作用？当文本长度超过父级时，我的文本不会自动换行。
我真的不希望将alertCardItem的flex值设置为1.5，我希望flex调整为警告消息的长度。我该如何实现？我尝试将flex设置为0，但是不起作用


在此处查看图像

我使用npm包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
  }

最佳答案

问题在于，带有View组件的Text容器根本不受宽度限制，因此由于其父级View（特别是其flex参数），它可以根据需要扩展。尝试这个：

<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定义是否将flex项目强制保留在一行中或移至下一行，而不是其内容。如果要控制内容包装，请使用“空白” css属性。它可能在React中有其代表，但我对React tbh不太擅长。

至于您的第二个问题，我很难回答，因为我真的不知道您以外会发生什么。但是，如果您希望它根据其内容进行调整，那么flexbox不是正确的工具。

关于css - 动态flex + flexWrap无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48712406/