努力尽今夕,少年犹可夸。这篇文章主要讲述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/> ) } }
至于原理还没有研究,稍后如果弄明原理,再回来来补充。
推荐阅读
- Lumen手记(lumen的初始化——app初始化)
- 背水一战 Windows 10 (31) - 控件(按钮类): ButtonBase, Button, HyperlinkButton, RepeatButton, ToggleButton, App
- (转)Android EditText限制输入字符的5种实现方式
- Android零基础入门第66节(RecyclerView点击事件处理)
- (转)android:inputType参数类型说明
- android gradle打包常见问题及解决方案
- android studio - 导入工程报错[Plugin with id 'com.android.application' not found]
- Java与Python的区别对比
- Java与Kotlin的区别对比