React Native 实现页面动态切换
2016-12-17 19:01
357 查看
第一步. 初始化子View
constructor(props){
super(props);
this.state = {
isChange : true,
itemView : (<Text>测试1</Text>),
}
};
第二步. 在render中
<View style={{flex:Util.ScreenHeight-128,justifyContent: 'flex-start',}}>
{this.state.[b]itemView}[/b]
</View>
第三步. 在触发事件中动态设置state
let itemView;
var isChange = !this.state.isChange;
if (isChange) {
itemView = (<Text>测试1</Text>);
} else{
itemView = (<Text>测试2</Text>);
};
this.setState({
isChange : isChange,
itemView : itemView,
});
constructor(props){
super(props);
this.state = {
isChange : true,
itemView : (<Text>测试1</Text>),
}
};
第二步. 在render中
<View style={{flex:Util.ScreenHeight-128,justifyContent: 'flex-start',}}>
{this.state.[b]itemView}[/b]
</View>
第三步. 在触发事件中动态设置state
let itemView;
var isChange = !this.state.isChange;
if (isChange) {
itemView = (<Text>测试1</Text>);
} else{
itemView = (<Text>测试2</Text>);
};
this.setState({
isChange : isChange,
itemView : itemView,
});
相关文章推荐
- RN实现轮播器
- React Native之ScrollView控件详解
- React Native之ScrollView控件详解
- React Native之ScrollView控件详解
- React Native 开发资料汇总
- react学习总结7--可能会遇到的BUG
- react学习总结6--构建工具Gulp、Browserify(二)
- react学习总结3--React-Router
- react学习总结2--基础(二)
- react学习总结1--基础(一)
- React 入门实例教程
- 学习 Reflux 填过的坑
- [中文]React:"don't fuck it up like Google did with Angular"
- awesome-react-native
- 使用WebStorm开发工具编辑React Native代码时的智能提示
- 第3月第16天 fd_set 32 ACE_TP_Reactor
- react-native
- 基于React+webpack的项目环境搭建
- webpack+react配置
- [译]使用 ES6+ 写 react