Creat-React-Native-App 之StackNavigator之踩坑记录
Posted Coding Life
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Creat-React-Native-App 之StackNavigator之踩坑记录相关的知识,希望对你有一定的参考价值。
Creat-React-Native-App简称CRNA.
在我开始入门RN时fb已经推出和Expo联合开发用于快速创建React Native应用的工具: Create-React-Native-App。以下是在CRNA开发起步时导航器跳转页面遇到的问题记录。
参考资料:React Native中文网
根据教程指导,写了最简单的导航条调用示例:
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之踩坑记录的主要内容,如果未能解决你的问题,请参考以下文章