react-native 导航教程
本篇文章适合于react技术栈的人阅读,对native开发有兴趣的可以关注。
废话不多说,直接上代码。
1简单路由配置
|
|
上述是三个简单的路由配件,下面用到代码中
|
|
相信对react有研究的同学看上面代码应该比较轻松。
react-native中使用view,忘记div,而且这种内置需要引入。
1import {ScrollView,StyleSheet,TouchableOpacity,Text,StatusBar,View} from 'react-native';对es6了解的人对于这种解构操作比较习惯,navigation.navigate是push视图。
接下来是样式用法
注意到view上面的样式是如何绑定的 style={styles.itemContainer}
关键的位置来了,如何将这个路由串联起来
const AppNavigator = StackNavigator(
{
...ExampleRoutes,
Index: {
screen: MainScreen,
},
},
{
initialRouteName: 'Index',
headerMode: 'none',
/*
* Use modal on iOS because the card mode comes from the right,
* which conflicts with the drawer example gesture
*/
mode: Platform.OS === 'ios' ? 'modal' : 'card',
}
);
export default () => <AppNavigator />;
Index对应的是screen: MainScreen,mainscreen其实就是所有路由列表。
initialRouteName: ‘Index’将其呈现出来。