小编Tal*_*eem的帖子

如何在屏幕中心将 React Native Modal 显示为小窗口

我想在屏幕中间显示我的本机模式,即使我已经完成了样式,但窗口显示在我的屏幕顶部而不是屏幕中心。这是我迄今为止尝试过的:

 <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>
Run Code Online (Sandbox Code Playgroud)

这是模态样式:

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

react-native react-native-stylesheet

1
推荐指数
1
解决办法
5514
查看次数