Question

与本地库和react-native-modal是否有冲突？我无法获得显示内容的模态。我想知道是否是因为本机基础的Container标签。

代码：https://snack.expo.io/rJbAI_Cxr

Answer 1

我遇到了同样的问题。只需从flex:1样式中删除Modal，您将最终获得没有任何样式的中心模式。然后，您需要自己设置模式的所有样式。

Answer 2

您也可以从react本机组件中使用Modal，无需使用第三方库。

import {Modal} from 'react-native';


constructor(props) {
        super(props);
        this.state = { 
          modalVisibility: false,
    };

  ShowModalFunction(visible) {
    this.setState({ modalVisibility: visible });
}



                       <Modal
                        transparent={true}
                        animationType={"slide"}
                        visible={this.state.modalVisibility}
                        onRequestClose={() => { this.ShowModalFunction(!this.state.modalVisibility) }} >


            <View style={{ flex:1, justifyContent: 'center', alignItems: 'center' }}>

            <View style={styles.ModalInsideView}>

            <Text style={{color:'white',fontSize:14,fontWeight:'700'}}>Hello </Text>
            </View>
        </View>
        </Modal>

const styles = StyleSheet.create({        
ModalInsideView:{

  justifyContent: 'center',
  alignItems: 'center', 
  backgroundColor : "#00BCD4", 
  height: 245 ,
  width: '90%',
  borderRadius:10,
  borderWidth: 1,
  borderColor: '#fff'

},


});

如果您遇到此问题，请尝试此操作，让我知道。

Native Base和Modal在React Native中不起作用

2 个答案: