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

若是學習止步於 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(...);