Creat-React-Native-App 之StackNavigator之踩坑记录

努力尽今夕，少年犹可夸。这篇文章主要讲述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> ); } }

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

【Creat-React-Native-App 之StackNavigator之踩坑记录】在这套代码下我先后遇到了多个错误：
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/> ) } }

至于原理还没有研究，稍后如果弄明原理，再回来来补充。