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

標籤：否則   elf   效果   應對   先後   print   stack   blog   技術分享   

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>    );  }}

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

 

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

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/>      )  }}

　　

至於原理還沒有研究，稍後如果弄明原理，再回來來補充。

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