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中文网

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

  

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

以上是关于Creat-React-Native-App 之StackNavigator之踩坑记录的主要内容,如果未能解决你的问题,请参考以下文章

ORM之filter参数

python之%s

网络流之最小割

神经网络之:S型神经元

python之 字符串

python基础之集合