之前Demo有个问题一直没有解决.
所以要着手解决一些基本问题.
学习native也就2个星期的时间.所以简单的写下.
本次项目相对来谁比较简单,只有一些数字的展示功能,页面也并不复杂.
所以公司选用技术为ReactNative.
1:本文举例使用的插件:react-native-tab-navigator ,选项卡形式的导航
react-native-tab-navigator
为了方便,我都是直接COPY到项目里,install确实太费时间,而且很多时候还总报错.
直接copy到node_modules目录下.
国内的网也就这么回事.
如果直接在主页使用这个插件会造成跳入2级页面的时候tabbar没办法隐藏
直接代码
render() {
return (
<View style={{flex: 1}}>
<Navigator
ref='navigator'
style={styles.navigator}
configureScene={this.configureScene}
renderScene={this.renderScene}
initialRoute={{
component:Login,
name: '登陆' }}
/>
</View>
);
}
}
如果把导航页直接单独跳转的话 后面就可以直接跳转导航,而不妨碍tabbar的隐藏
以下为LOGIN 页面tabbar
render() {
return (
<TabNavigatortabBarStyle={styles.tab} >
<TabNavigator.Item
selected={this.state.selectedTab === 'home'}
title="Home"
renderIcon={() => <Image source={require('./res/home_normal.png')} />}
renderSelectedIcon={() => <Image source={require('./res/home_focus.png')} />}
badgeText="61"
onPress={() => this.setState({ selectedTab: 'home' })}>
<View style={{flex:1,backgroundColor:'#fff',justifyContent:'center'}}>
<Text style={{fontSize:20}}>我是第一个选项卡,直接书写出的视图!</Text>
</View>
</TabNavigator.Item>
<TabNavigator.Item
selected={this.state.selectedTab === 'profile'}
title="Profile"
renderIcon={() => <Image source={require('./res/personal_normal.png')} />}
renderSelectedIcon={() => <Image source={require('./res/personal_focus.png')} />}
onPress={() => this.setState({ selectedTab: 'profile' })}>
<TestPage/>
</TabNavigator.Item>
</TabNavigator>
);
}