如果學習止步於 hello world, 那麽人生也太沒意思了。這次要做一個看起來真實的應用。多添加幾個頁面，讓他們可以交互，動起來。

react-native 官方推薦使用 react-navigation 作路由管理，下面我將嘗試使用他。

根目錄下面建立 pages 文件夾，並在裏面建立 home.js 和 /user/index.js 兩個文件，接下來就可以在這個兩個視圖之間進行跳轉了

mkdir pages
cd pages
touch home.js
mkdir user
cd user
touch index.js

安裝路由管理

安裝

yarn add react-navigation
 

引入

// app.js
import { createStackNavigator } from ‘react-navigation‘;

建立路由導航

修改 app.js, 使用 createStackNavigator 創建堆棧卡片式的導航。

import { createStackNavigator } from ‘react-navigation‘;
import Home from ‘./pages/home.js‘;
import Profile from ‘./pages/user/index.js‘;

const App = createStackNavigator({
  Home: { screen: Home },
  Profile: { screen: Profile },
});

export default App
 

這裏建立了兩個視圖的導航， yarn ios 試一下，報錯了，原因是新建的2個視圖面還是空的，沒有返回一個 react compontent。現在關掉服務，在裏面寫2個組件。

多個頁面

在兩個頁面裏面隨便寫一些東西，navigationOptions 是路由的配置項，設置後會自動在視圖頂部生成一個原生的導航組件。

• home.js

// home.js
import ...;

export default class Home extends React.Component {
  static navigationOptions = {
    title: ‘首頁‘,
  };
  render
 
() {
    return (...);
  }
}

const styles = StyleSheet.create(...);

• user/index.js

// user/index.js
import ...;

export default class Home extends React.Component {
  static navigationOptions = {
    title: ‘個人中心‘,
  };
  render() {
    return (...);
  }
}

const styles = StyleSheet.create(...);

跳轉和返回

從一個頁面跳轉到另一個頁面，需要調用 navigate 方法, 點擊 Button, 會在當前視圖上疊加 Profile 視圖。點擊 Profile 上邊的返回按鈕，會自動返回到 Home 視圖。

// home.js
import ...;

export default class Home extends React.Component {
  static navigationOptions = {
    title: ‘首頁‘,
  };
  render() {
  const { navigate } = this.props.navigation;
  return (
    <Button
        title="去個人中心"
        onPress={() =>
          navigate(‘Profile‘, { name: ‘Jane‘ })
        }
     />
    );
  }
}

const styles = StyleSheet.create(...);

react-native初體驗(2) — 認識路由