react-navigation快速入门

新鲜事简单报

react-navigation是react-native官方推荐使用的导航库，简单易上手，功能还很强。

安装

使用npm安装

npm install --save react-navigation

使用yarn安装

yarn add react-navigation

喜欢谁就选谁。

跳转方式

navigation默认给了三种跳转方式
StackNavigator,TabNavigator,DrawerNavigator都是人如其名，效果的话可以想象，如果实在想象不出来那就接着往下看

恭喜xxx总喜提新页面

时间紧任务重直奔主题拒绝前戏，只需实用shan分钟，你就可以在各个页面中遨游。
首先看StackNavigator的效果

const HomeScreen = ({navigation})=>(
  <View>
    <Text>
      Hello to Chat
    </Text>
    <Button title={'Chat to Lucy'} onPress={()=>{navigation.navigate('Chat',{user:'Lucy'})}} />
  </View>
);
const ChatScreen =({navigation})=>(
  <View>
    <Text>
      Chat with {navigation.state.params.user }
    </Text>
  </View>
);
const RootStack = StackNavigator({
  Home:{
    screen:HomeScreen,
    navigationOptions:{
      headerTitle:'Home'
    }
  },
  Chat:{
    screen:ChatScreen,
    navigationOption:{
      headerTitle:'Chat'
    }
  }
});

官网的例子这里就不多说，自己试验就可以，其实我在这里最想说的是一个思想，就是导航就是组件，这样你就可以很好的理解导航之间的嵌套，做到无所欲为。
看下导航嵌套的例子,在之前的代码下面新加一个页面和TabNavigator导航

const SetUp = () =>(
  <Text>
    Set Up!
  </Text>
)
const RootTab = TabNavigator({
  Main:{
    screen:RootStack
  },
  SetUp:{
    screen:SetUp
  }
});

导航就是组件，所以这里可以看到我们把之前的Stack类型的导航嵌套在Tab导航中这样你在就可通过切换tab标签切换其他页面，也可以在Main页面下跳转，又不改变标签，大概可以抽象成下面这种图片
----------------------------------------------（图片加载）---------------------------------------------

好了谢谢你这么认真的看完我如此认真的耍流氓~~~