用户登录

Modal 组件的 visible 属性可以控制对话框显示或者隐藏 .. 默认这个对话框是显示的状态 .. 在这个 Modal 组件上面添加一个 visible 属性 .. 把它的值设置成 false ... 这样会把对话框隐藏起来 .. 再把它设置成 true .. 会显示出对话框 ..

在我们自己的组件里可以添加一个状态来表示在对话框的显示或者隐藏 .. 添加一个默认的状态 .. 名字可以是 modalVisible .. 它的值默认设置成 false ..

找到对话框组件 .. 把它的 visible 这个属性的值,用 modalVisible 这个状态来表示 ...

然后在屏幕上,我们可以再添加一个按钮 .. 这里我用的是 TouchableHighlight 这个组件 .. 按下它的时候,会执行这个组件里的 onPress ... 这里我们要做的事儿就是去显示对话框 .. 让对话框显示出来可以去设置一下组件的 modalVisible 这个状态 .. 把状态的值设置成 true ..

再去试一下 .. 点击屏幕上的这个按钮 .. 这样会显示出对话框 .. 在这个对话框上,也有一个按钮,我们可以使用它去隐藏这个对话框 .. 找到这个按钮 .. 在它的 onPress 属性里同样去设置一下 modalVisible 这个状态 .. 把它的值设置成 false ..

保存 .. 点击按钮 .. 会显示对话框 .. 再点一下对话框上的这个按钮 .. 会把这个对话框隐藏起来 ..

Modal:显示与隐藏对话框《 React Native 组件 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点