Creat-react-native-app's Stacknavigator's pit record

Source: Internet
Author: User

Creat-react-native-app abbreviation Crna.

When I started RN, FB had launched and Expo co-developed tools for rapid creation of React Native applications: Create-react-native-app. The following is a record of the issues encountered in the Navigator jump page when Crna development started.

Reference: React native Chinese web

React Navigation

Based on tutorial instructions, the simplest example of a navigation bar invocation is written:

Import React from ' React 'react-native' react-navigation 'default  class Homescreen extends React.component {  = {    ' Welcome ',  };  Render () {    return  (     <text>hello, navigation!</text>;    );  } }

The correct operation of the effect should be as, however, I do not have the effect of the title, only Text, which is recorded as a problem.

Go ahead and follow the tutorials and add a new page to jump.

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 withLucy ',}); Render () {return (      <View> <text>chat withLucy</text> </View>    ); }}
export default = Stacknavigator ({Home: {screen:homescreen}, Chat: {screen:chatscreen}}

In this set of code I have encountered several errors:

Route ' Chat ' should declare a screen. For example: ... etc

Undefined isn't an object (evaluating ' this.props.navigation.navigate ')


A closer look at the tutorial found that the code is not different, after many attempts to finally find a solution!! Original sticker reference:React native-navigation issue "Undefined is not a object (this.props.navigation.navigate)"

After the post after the completion of the code to finally run and solve the problem together, the code:

Import React from ' React '; import {StyleSheet, Text, Button, View,} from ' react-native '; import {stacknavigator} from ' Rea Ct-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 Lu  Cy ',});  Render () {return (<View> <text>chat with lucy</text> </View>); }}//Awesomeproject is your react native project name Note: This piece of code to be placed in the homescreen,chatscreen ... The following error will occur: Home does not exist. Const Awesomeproject = Stacknavigator ({Home: {screen:homescreen}, Chat: {screen:chatscreen}},{initIalroutename: ' Home ',//default display//header:{////NAV bar visible//Visible:false,//////////////////////////////             , the default is the title of the previous page//backtitle: "Back",/////navigation bar style//HeaderStyle: {/// BackgroundColor: ' #fff '//},///////////TitleStyle: {//COL Or: ' Green '//}//},//title: ' Home ',/////navigation bar style//HeaderStyle: {//BACKG Roundcolor: ' #fff '//},//////////Headertitlestyle: {//color: ' Blue ',/  Cardstack: {//Gesturesenabled:true,//},//Ontransitionstart: () =>{console.log (' Navigation bar toggle start '); Callback//Ontransitionend: () =>{console.log (' Navigation bar Toggle End '),},//callback}), const Appnavigation = () = (<awesomepr Oject/>) Export defAult class App extends React.component {render () {return (<AppNavigation/>)}} 


As for the principle has not been studied, later if the principle, then come back to add.

Creat-react-native-app's Stacknavigator's pit record

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.