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

在这套代码下我先后遇到了多个错误：

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

　　

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