2017-05-20

ReactNative開發入門教學(5)-Navigation實現多頁，畫面跳轉，翻頁

通常APP不可能永遠都停留在同一個畫面所以通常需要有下一頁然後返回的功能。

在ReactNative中也提供相關的 Navigation套件可以使用。安裝方法與

詳細功能可以看官網的說明 https://facebook.github.io/react-native/docs/navigation.html

這個套件主要分成幾種功能，一種是TabNavigator(類似書籤般的換頁)，StackNavigator(堆疊換頁)

以及DrawerNavigator(滑動選單，功能是點一個按鈕之後可以從右邊或左邊滑出一個選單或是頁面)

有了以上這三種功能，我想應該可以滿足大部分功能型APP的要求，當然如果是拿來開發遊戲或是

複雜一點的或許還是學寫 swift或是 JAVA 來的好一點。

這邊跳過安裝步驟，直接來實作看看

１・用TabNavigator做一個有兩個分頁，並且所在分頁的按鈕顯示為藍色:

import React, { Component } from 'react';
import {
  Text,
  View,
} from 'react-native';
import {
  TabNavigator,
} from 'react-navigation';

class Page1 extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return(
      <View>
        <Text>Page_1</Text>
      </View>
    );
  }
}

class Page2 extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return(
      <View>
        <Text>Page_2</Text>
      </View>
    );
  }
}

const App = TabNavigator({
  Page1: { screen: Page1, navigationOptions:{tabBarLabel: '第一頁'}},
  Page2: { screen: Page2, navigationOptions:{tabBarLabel: '第二頁'}},
  },{
  tabBarOptions: {
    activeTintColor: 'blue',
    labelStyle: {
      fontSize: 14,
    },
  },
});

export default App;

從上面實作我們可以發現有兩個比較特別的地方，就是navigationOptions與tabBarOptions

這是用來控制該頁面的一些title或是顯示效果的選項，相關用法可以參考官方網站https://reactnavigation.org/docs/navigators/tab

２・用StackNavigator實現點擊後顯示新的頁面

import React, { Component } from 'react';
import {
  Text,
  View,
  Button,
} from 'react-native';
import {
  StackNavigator,
} from 'react-navigation';

class Page1 extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return(
      <View>
        <Text>Page_1</Text>
        <Button title="顯示第二頁" onPress={() => this.props.navigation.navigate('Page2', {something:'Page_2'})} />
      </View>
    );
  }
}

class Page2 extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    const { params } = this.props.navigation.state;
    return(
      <View>
        <Text>{params.something}</Text>
      </View>
    );
  }
}

const App = StackNavigator({
  Page1: { screen: Page1, , navigationOptions: ({navigation}) => ({title: '第一頁',})},
  Page2: { screen: Page2, , navigationOptions: ({navigation}) => ({title: '第二頁',})},
  },{ headerMode: 'screen'});

export default App;

３・用DrawerNavigator實現一個右邊滑出的視窗

import React, { Component } from 'react';
import {
  Text,
  View,
  Button,
} from 'react-native';
import {
  DrawerNavigator,
} from 'react-navigation';

class Page1 extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return(
      <View>
        <Text>Page_1</Text>
        <Button title="開啟選單" onPress={() => this.props.navigation.navigate('DrawerOpen')} />
      </View>
    );
  }
}

class Page2 extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return(
      <View>
        <Text>Page_2</Text>
        <Button title="開啟選單" onPress={() => this.props.navigation.navigate('DrawerOpen')} />
      </View>
    );
  }
}

const App = DrawerNavigator({
  Page1: { screen: Page1, , navigationOptions: {drawerLabel: '第一頁'}},
  Page2: { screen: Page2, , navigationOptions: {drawerLabel: '第二頁'}},
  },{
    drawerWidth: 200,
    drawerPosition: 'right',
  });

export default App;

以上是這三種效果最基本的實現，當然還有很多參數可以做微調，詳細都可以看一下官方網站給的Option的部分!

ReactNative