1

我想在屏幕中间显示我的反应本机模式，即使我已经完成了样式设置，但窗口出现在我的屏幕顶部但不在屏幕中心。这是我到目前为止所尝试的：

 <Modal animationType = {"slide"} transparent = {true}
        style={styles.modal}
               visible = {this.state.modalVisible}
               onRequestClose = {this.closeModal}>

               <View style={{justifyContent: 'center', backgroundColor: '#ffff', margin: 0, 
          alignItems: 'center'}}>
                  <Text >Enter Email</Text>
                  <TextInput
              underlineColorAndroid='transparent'
              onChangeText={(email) => this.setState({email})}/>
              <Text>Enter Password</Text>
              <TextInput 
              secureTextEntry={true}
              underlineColorAndroid='transparent'
              onChangeText={(password) => this.setState({password})}/>
                  <TouchableHighlight onPress = {() => {
                     this.toggleModal(!this.state.modalVisible)}}>
                     <Text >Close</Text>
                  </TouchableHighlight>
               </View>
            </Modal>

这是模态样式：

const styles = StyleSheet.create({
      modal:{
          position:"relative",
        width: 250, 
        height: 100,
        backgroundColor: '#FFF',
        justifyContent: 'center',
        alignSelf: 'center',
      }
});
4

1 回答 1

9

styleReactNative 本机中没有道具（请参阅此链接Modal上的文档，稍后在答案中对此进行更多说明）。

要正确设置您的样式Modal，您需要创建一个View样式flex: 1为的所有子元素的父级。例如，您将执行以下操作：

<Modal
  animationType={"slide"}
  transparent={true}
  visible={this.state.modalVisible}
  onRequestClose={this.closeModal}
>
  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}> // modalContainerStyle
    <View style={styles.childStyle}>
       {...}
    </View>
  </View>
</Modal>

childStyle您的示例中模态中第一个元素的样式在哪里。

您还可以在上面的代码中添加backgroundColorofrgba(0,0,0,0.5)以modalContainerStyle使其具有适当的模态外观。

回到style道具，它仅在名为react-native-modal. 你可以在这里阅读更多关于它的信息：https ://github.com/react-native-community/react-native-modal

于 2020-03-05T19:33:47.737 回答