React Native 中的 Flexbox 高度

Question

我正在尝试在 React Native 中创建一个简单的内容大小的对话框。在这个层次结构中最高的我有我的叠加 <View> 样式：

 {
   position: 'absolute',
   top: 0,
   left: 0,
   width: '100%',
   height: '100%',
   zIndex: 100,
   backgroundColor: COLOR
}

其中，我有一个包装 <View> 这种风格：

{
   flex: 1,
   alignItems: 'center',
   justifyContent: 'center'
}

然后我有对话框 <View>:

{
   flex: 1,
   width: '86%',
   maxWidth: 450,
   flexDirection: 'column',
   justifyContent: 'flex-start',
   alignItems: 'flex-start',
   backgroundColor: 'white',
   borderWidth: 5,
   borderColor: 'gold'
}

看起来问题出在我构建对话框的方式上：

<View style={{flex: 1, flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'flex-start'}}>
  <Image source={require('../../assets/icons/warning.png')} 
   style={{resizeMode: 'contain', height: 50, width: 48, marginRight: 30}} />
  <View style={[flex: 1, flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-start']}>
    <Text>{this.props.dialogMessage}</Text>
    <View style={{flex: 1, width: '100%', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start'}}>
       <Button dismissOverlay={this.props.dismissOverlay} />
    </View>
  </View>
</View>

通过这种样式我得到了这样的结果：

如果我将 flex 更改为 0，则会得到：

如何让对话框根据内容调整大小？

Answer 1

在您的对话框中 <View> 根本不要设置 flex。就这样吧

{
   width: '86%',
   maxWidth: 450,
   flexDirection: 'column',
   justifyContent: 'flex-start',
   alignItems: 'flex-start',
   backgroundColor: 'white',
   borderWidth: 5,
   borderColor: 'gold'
}

如果它不起作用，您能否提供更多关于对话框内容的代码view？

React Native 中的 Flexbox 高度

Flexbox height in React Native

react-native

flexbox

react-native-flexbox