React-Native Modal未使用指定的高度和宽度进行渲染

Question

我使用的模态是全屏渲染我无法让它看起来像一个对话框。

这是我的模态文件：

<Modal
  visible={this.props.visible}
  animationType={this.props.animationType}
  onRequestClose={() => { console.log('Modal has been closed.'); }}
>
  <ActivityIndicator
    size={this.props.size}
    color={this.props.color}
  />
</Modal>

这是我使用它的地方：

<View>
  <LoadingModal
    visible={this.state.loading}
    animationType="slide"
    size="large"
    color="black"
  />
</View>

我现在这样做，当我这样做，当我给视图提供宽度和高度时，稍后，我删除了所有这些因为没有得到任何改变

我想要的是：

Answer 1

我想这可能会对您有所帮助：https://snack.expo.io/HkGhIy90-

另外，不要忘记Dimensions模块，根据每个屏幕的高度动态设置marginTop和marginBottom，而不是像我的Expo Snack那样使用固定值。

Answer 2

基本上您所看到的是默认的React Native行为。您没有设置任何样式，所以为什么期望对话框居中？

一些提示：

1. 如果你想在中间居中，你想将alignItems和justifyContent设置为'center'。这通常可以将它放在父视图的中间。
2. RN默认设置是所有内容都有弹性，但您需要将第一个父视图设置为flex = 1，因此RN知道它需要对整个屏幕进行ocupy。
3. 默认情况下，视图的所有子项都将在列中排序。由于您想要一行，您需要设置flexDirection ='row'
4. 样式不像普通CSS那样从父代继承。您需要手动设置每种样式。

我建议你在做其他事情之前阅读所有入门指南。特别请阅读：https://facebook.github.io/react-native/docs/flexbox.html

Answer 3

我知道这是一个老问题。但是我很幸运使模态透明并设置嵌套视图来获得您想要的效果。

这是一个博览会链接，其中包含一个有效的示例：https://snack.expo.io/ByCd6FBpS。

希望这对以后的其他人有用。