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

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

文章图片
       
Creat-React-Native-App 之StackNavigator之踩坑记录

文章图片

正确运行效果应对如上图,然而我的运行效果并没有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/> ) } }


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

    推荐阅读