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

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