使用 React-native modal 形成和设置适当的对话框或警报框答案

【问题标题】：Forming and styling a proper dialog or alert like box with React-native modal使用 React-native modal 形成和设置适当的对话框或警报框
【发布时间】：2019-10-18 11:37:13
【问题描述】：

我想在 react native modal 的帮助下制作一个通用对话框。我做了如下代码：

<Modal isVisible={isModalVisible} style={styles.modalStyle} >                                      
   <Text>Hello World!</Text>                               
</Modal>

并在下面提到了样式：

const styles = StyleSheet.create({
    modalStyle : {
      top                   : '50%',
      left                  : '50%',
      right                 : 'auto',
      bottom                : 'auto',
      marginRight           : '-50%',

    },
}

但是模态对话框占用了整个屏幕！

我也尝试将代码编辑为：

<Modal>
  <View style={{ flex: 1, top: 50%, left: 50%, width: 70%, height : 50% }}>
       <Text>Hello World!</Text>
  </View>
</Modal>

移除 Modal 中的样式。但结果还是一样！

【问题讨论】：

您是否尝试使用width:height/3 height:height/3 从Dimensionslibrary of react-native 获取高度。
您也可以查看Modal 的presentationStyle 属性。有关更多信息，请参阅this。
这个模态的类型是什么？我的意思是这是 react native 默认模态还是 react-native-community 的模态或其他？
@KishanBharda 这是反应原生默认模式
@avanikothari 可以试试

标签： javascript css react-native

【解决方案1】：

react-native 的内置模式有时难以自定义。有一个很棒的库，我用过很多次。见this。

【讨论】：

【解决方案2】：

我使用了 react native modal ，为了部分显示模态，我所做的是，高度为 100，所以你可以剪裁高度

<Modal isVisible={true} style={{justifyContent: "flex-end"}} >
<View style={{height:100}}>
</View>
</Modal>

现在，尝试一次。让我知道这是否有效。因为它对我有用。否则我会改变它。

【讨论】：