可以渲染自定义组件的 React Native modal答案

【问题标题】：React Native modal that can render custom Components可以渲染自定义组件的 React Native modal
【发布时间】：2020-03-16 21:27:50
【问题描述】：

我一直在寻找一个反应原生模式、弹出窗口，甚至是一个可以实际呈现自定义组件的警报，而不是简单的文本。我真正想做的是抛出一个带有 5 星评级组件的模式，但我添加的任何一个包都不支持它。提前致谢

【问题讨论】：

标签： reactjs react-native expo

【解决方案1】：

这是我的解决方案，您可以在 View 中放置任何内容：

import Modal from "react-native-modal";

<Modal isVisible={this.state.alertState} onBackButtonPress={()=>this.setState({alertState:false})} >
  <View style={styles.modal}>
    <Text style={styles.modalText}>modal Text!</Text>
      <TouchableOpacity onPress={()=>this.setState({alertState:false})} style={styles.modalButton}>
        <Text style={styles.modalButtonText}>Ok!</Text>
      </TouchableOpacity>
  </View>
</Modal>

这里是风格：

modal:{
backgroundColor:'white',height:.2*DEVICE_HEIGHT,alignItems:'center',width:.9*DEVICE_WIDTH,justifyContent:'center',borderRadius:10},

modalText:{
fontFamily:'IRANYekanMobileFN',padding:10},
modalButton:{
backgroundColor:'#306BF4',width:.25*DEVICE_WIDTH,height:.05*DEVICE_HEIGHT,alignItems:'center',justifyContent:'center',marginTop:20,borderRadius:10},
modalButtonText:{
fontFamily:'IRANYekanMobileFN',color:'white'}

【讨论】：