React-Native入門（2）-簡單闡述跳轉

晴川落雨發表於2018-03-27
React

啟動

認識一下index.js檔案，程式碼如下：
複製程式碼
import { AppRegistry } from 'react-native'; #從‘react-native’庫中引入‘AppRegistry’元件

import App from './App'; #引入‘App.js’檔案，並起個別名叫‘App’（這個名字可以隨便起）

AppRegistry.registerComponent('HelloWorld', () => App); #註冊js入口
複製程式碼
AppRegistry負責註冊執行RN應用程式的js入口。'HelloWorld'這個是專案名稱，不要隨便修改哦！可還記得上面文章中：
複製程式碼
react-native init HelloWorld
複製程式碼
這句程式碼，你建立工程時候的名字。如果這個對應不上你就會出現以下情況：
複製程式碼

React-Native入門（2）-簡單闡述跳轉

相信不少小夥伴都遇見過這個問題吧！
複製程式碼

體驗跳轉

API簡介 - StackNavigator

背景介紹：從0.44版本開始，Navigator被從react native的核心元件庫中剝離到了一個名為
react-native-deprecated-custom-components的單獨模組中。社群今後主推的方案是一個單獨的導航庫
react-navigation，它的使用十分簡單。所以我們使用StackNavigator來進行跳轉
複製程式碼

先來一波程式碼

Nav.js原始碼：

import {StackNavigator} from 'react-navigation'
import Hello from "./Hello";
import World from "./World"

export default NavData = StackNavigator({Hello: {screen: Hello}, World: {screen: World}})
複製程式碼
建立一個StackNavigator（有android經驗的小夥伴，仔細看看有點Androidmanifest.xml的味道），註冊了別稱‘Hello’的
Hello.js檔案和稱‘World’的World.js檔案
複製程式碼

index.js原始碼：

import {AppRegistry} from 'react-native';
import App from './src/solide/testNavagation/Nav';

AppRegistry.registerComponent('HelloWorld', () => App); #這裡要注意是StackNavigator去註冊啟動
複製程式碼
應用預設啟動第一個元素Hello
複製程式碼

Hello.js原始碼：

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

export default class Hello extends Component {
    //設定導航欄標題
    static navigationOptions = {
        title: 'Hello'
    };

    render() {
        const {navigate} = this.props.navigation;

        return <View>
            //設定點選事件
            <Text onPress={() => navigate('World')}>Hello Hello</Text>
        </View>
    }
}
複製程式碼

World.js原始碼就不放了，只有一個view展示。

專案地址

https://github.com/yzj0487/StackNavigator
複製程式碼

詳細分析一波

如果你是下載的完成專案或者copy的程式碼，那麼相信你已經體驗過跳轉了。程式碼只簡單的幾行，如果你是自己寫的，那麼
我相信你會遇見不少問題，或者你會問為什麼要這樣寫？
來來小問題走一波：
複製程式碼

React-Native入門（2）-簡單闡述跳轉

有木有很興奮，又是熟悉的紅色。標題很清晰，navigate物件找不到，引起原因：
複製程式碼
 const {navigate} = this.props.navigation;
複製程式碼
就是這行程式碼引起的，引起的原因大致兩種：
1、你沒有寫這行程式碼
2、這行程式碼的作用域沒有覆蓋到（例如你把click方法定義在外面，那麼這行程式碼也要寫在click方法裡面，如果你寫在
render裡面就會報錯）

小知識點：這裡this.props不知道小夥伴是怎麼理解的？今後他會和我們經常見面，這裡我對它也不是特別瞭解，反正它
的作用很多，我們暫且把他理解為——元件的屬性


好學的小夥伴，肯定還會有很多問題，我們再簡單看個問題，為咩‘static navigationOptions’這麼一個靜態變數就能設定屬性？

回答這個問題我們必須去看看StackNavigator的原始碼了
複製程式碼

StackNavigator.js原始碼：

export default (routeConfigMap, stackConfig = {}) => {
  const {
    initialRouteKey,
    initialRouteName,
    initialRouteParams,
    paths,
    headerMode,
    headerTransitionPreset,
    mode,
    cardStyle,
    transitionConfig,
    onTransitionStart,
    onTransitionEnd,
    navigationOptions,
  } = stackConfig; //配置資訊

  const stackRouterConfig = {
    initialRouteKey,
    initialRouteName,
    initialRouteParams,
    paths,
    navigationOptions,
  };

  const router = StackRouter(routeConfigMap, stackRouterConfig);

  // Create a navigator with CardStackTransitioner as the view
  const navigator = createNavigator(router, routeConfigMap, stackConfig)(
    props => (
      <CardStackTransitioner
        {...props}
        headerMode={headerMode}
        headerTransitionPreset={headerTransitionPreset}
        mode={mode}
        cardStyle={cardStyle}
        transitionConfig={transitionConfig}
        onTransitionStart={onTransitionStart}
        onTransitionEnd={(lastTransition, transition) => {
          const { state, dispatch } = props.navigation;
          dispatch(NavigationActions.completeTransition({ key: state.key }));
          onTransitionEnd && onTransitionEnd(lastTransition, transition);
        }}
      />
    )
  );

  return createNavigationContainer(navigator);
};
複製程式碼
檢視一下原始碼是不是豁然開朗了？如果沒有，那麼我簡單說兩句，config中直接引用常量屬性‘navigationOptions’，
那麼你在元件中‘static navigationOptions’就是override這個屬性了。

附上官方解釋:the options can be a function that takes the following arguments, and returns an object of
navigation options that will be override the route-defined and navigator-defined navigationOptions

文件地址：https://reactnavigation.org/docs/stack-navigator.html
複製程式碼

相關文章