首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >本机基础和模态在React本机中不起作用

本机基础和模态在React本机中不起作用
EN

Stack Overflow用户
提问于 2019-07-09 03:14:14
回答 2查看 3.1K关注 0票数 1

与原生基础和react- native -modal有冲突吗?我无法让我的模式显示内容。我想知道是不是因为原生基础的容器标签。

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

EN

回答 2

Stack Overflow用户

发布于 2019-07-09 13:33:37

你也可以从react原生组件中使用Modal,不需要使用第三方库。

代码语言:javascript
运行
复制
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'
 
},
 

});

如果你在这方面遇到问题,试一下,让我知道。

票数 1
EN

Stack Overflow用户

发布于 2019-10-02 20:56:25

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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56941252

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档