Creat-React-Native-App 之StackNavigator之踩坑記錄

Creat-React-Native-App簡稱CRNA.

在我開始入門RN時fb已經推出和Expo聯合開發用於快速建立React Native應用的工具: Create-React-Native-App。如下是在CRNA開發起步時導航器跳轉頁面遇到的問題記錄。

參考資料：React Native中文網

                  React Navigation

根據教程指導，寫了最簡單的導航條調用示例：

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


export default class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    return (
     <Text>Hello, Navigation!</Text>;
    );
  }
}

      

正確運行效果應對如上圖，然而個人運行效果並無title，只有 Text，這裏記爲問題一。

 

繼續按照教程往下走，新增一個頁面用於跳轉。

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

 class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
   const { navigate } = this.props.navigation;
   console.log(navigate);
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
           onPress={() => navigate('Chat', { user: 'Lucy' })}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}

class ChatScreen extends React.Component {
 static navigationOptions = ({ navigation }) => ({
    title: `Chat with Lucy`,
  });
  render() {return (
      <View>
        <Text>Chat with Lucy</Text>
      </View>
    );
  }
}

const AwesomeProject = StackNavigator({ Home: { screen: HomeScreen }, Chat: { screen: ChatScreen } }export default 

 

在這套代碼下我前後遇到了多個錯誤：

Route 'Chat' should declare a screen. For example: ...etc

undefined is not an object (evaluating 'this.props.navigation.navigate')

......

仔細查看教程發現代碼並無不一樣，多番嘗試後終於找到解決方法!! 原貼參考：React Native - navigation issue 「undefined is not an object (this.props.navigation.navigate)」

按照帖子補充完代碼後終於正常運行並一同解決了問題一，祭出代碼：

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

 class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
   const { navigate } = this.props.navigation;
   console.log(navigate);
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
           onPress={() => navigate('Chat', { user: 'Lucy' })}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}

class ChatScreen extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    title: `Chat with Lucy`,
  });
  render() {
    return (
      <View>
        <Text>Chat with Lucy</Text>
      </View>
    );
  }
}

// AwesomeProject 是你的react native 項目名  注意：這塊代碼要放置到HomeScreen，ChatScreen...的下面不然會出錯：Home不存在。
const AwesomeProject = StackNavigator({
  Home: { screen: HomeScreen },
  Chat: { screen: ChatScreen }
}
,{
  initialRouteName: 'Home', // 默認顯示界面
    // header:{
    //      //導航欄可見
    //         visible : false,
    //         //左上角的返回鍵文字, 默認是上一個頁面的title
    //         backTitle : "返回",
    //         //導航欄的style
    //         headerStyle: {
    //             backgroundColor: '#fff'
    //         },
    //         //導航欄的title的style
    //         titleStyle: {
    //             color: 'green'
    //         }
    // },
    // title : 'home',
    // //導航欄的style
    //  headerStyle: {
    //             backgroundColor: '#fff'
    //  },
    //         //導航欄的title的style
    //  headerTitleStyle: {
    //          color: 'blue',
    //          //居中顯示
    //          alignSelf : 'center',
    //      },

    // //是否容許右滑返回，在iOS上默認爲true，在Android上默認爲false
    // cardStack: {
    //         gesturesEnabled: true,
    // },
    //  onTransitionStart: ()=>{ console.log('導航欄切換開始'); },  // 回調
    // onTransitionEnd: ()=>{ console.log('導航欄切換結束'); },  // 回調
});


const AppNavigation = () => (
  <AwesomeProject />
  )

export default class App extends React.Component {
  render(){
    return (
      <AppNavigation/>
      )
  }
}

　　

至於原理尚未研究，稍後若是弄明原理，再回來來補充。