Quick Start | 快速开始

如果这是你首次开发 React Native 应用，我们推荐你阅读 facebook 的官方指南：“Getting Started”。

Installation | 安装

React Router Native 已经 发布到 npm 因此你可以使用 npm 或者 yarn。

  1. npm install react-router-native
  2. # 或
  3. yarn add react-router-native

当你创建完 React Native 项目后，你可以复制任意的示例代码，并粘贴到 index.ios.js 和 index.android.js。

代码如下：

  1. import React from 'react'
  2. import {
  3.   StyleSheet,
  4.   Text,
  5.   View,
  6.   AppRegistry,
  7. } from 'react-native'
  9. import { NativeRouter, Route, Link } from 'react-router-native'
  11. const Home = () => (
  12.   <Text style={styles.header}>
  13.     首页
  14.   </Text>
  15. )
  17. const About = () => (
  18.   <Text style={styles.header}>
  19.     关于
  20.   </Text>
  21. )
  23. const Topic = ({ match }) => (
  24.   <Text style={styles.topic}>
  25.     {match.params.topicId}
  26.   </Text>
  27. )
  29. const Topics = ({ match }) => (
  30.   <View>
  31.     <Text style={styles.header}>主题列表</Text>
  32.     <View>
  33.       <Link
  34.         to={`${match.url}/rendering`}
  35.         style={styles.subNavItem}
  36.         underlayColor='#f0f4f7'>
  37.           <Text>Rendering with React</Text>
  38.       </Link>
  39.       <Link
  40.         to={`${match.url}/components`}
  41.         style={styles.subNavItem}
  42.         underlayColor='#f0f4f7'>
  43.           <Text>Components</Text>
  44.       </Link>
  45.       <Link
  46.         to={`${match.url}/props-v-state`}
  47.         style={styles.subNavItem}
  48.         underlayColor='#f0f4f7'>
  49.           <Text>Props v. State</Text>
  50.       </Link>
  51.     </View>
  53.     <Route path={`${match.url}/:topicId`} component={Topic}/>
  54.     <Route exact path={match.url} render={() => (
  55.       <Text style={styles.topic}>选择一个主题。</Text>
  56.     )} />
  57.   </View>
  58. )
  60. const nativeRouterExamples = () => (
  61.   <NativeRouter>
  62.     <View style={styles.container}>
  63.       <View style={styles.nav}>
  64.         <Link
  65.           to="/"
  66.           underlayColor='#f0f4f7'
  67.           style={styles.navItem}>
  68.             <Text>首页</Text>
  69.         </Link>
  70.         <Link
  71.           to="/about"
  72.           underlayColor='#f0f4f7'
  73.           style={styles.navItem}>
  74.             <Text>关于</Text>
  75.         </Link>
  76.         <Link
  77.           to="/topics"
  78.           underlayColor='#f0f4f7'
  79.           style={styles.navItem} >
  80.             <Text>主题列表</Text>
  81.         </Link>
  82.       </View>
  84.       <Route exact path="/" component={Home}/>
  85.       <Route path="/about" component={About}/>
  86.       <Route path="/topics" component={Topics}/>
  87.     </View>
  88.   </NativeRouter>
  89. )
  91. const styles = StyleSheet.create({
  92.   container: {
  93.     marginTop: 25,
  94.     padding: 10,
  95.   },
  96.   header: {
  97.     fontSize: 20,
  98.   },
  99.   nav: {
  100.     flexDirection: 'row',
  101.     justifyContent: 'space-around'
  102.   },
  103.   navItem: {
  104.     flex: 1,
  105.     alignItems: 'center',
  106.     padding: 10,
  107.   },
  108.   subNavItem: {
  109.     padding: 5,
  110.   },
  111.   topic: {
  112.     textAlign: 'center',
  113.     fontSize: 15,
  114.   }
  115. })
  117. AppRegistry.registerComponent('MyApp', () => App);