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之踩坑记录
原文：http://www.cnblogs.com/tracyzeng/p/7567696.html