StackNavigator in react native app -
i have created , new react native app using create-react-native-app. ended app works on expo. want add stack stacknavigator react-navigation have flowed guide reactnavigation.org , did npm install --save react-navigation
in app directory. thing different did have used create-react-native-app awesomeproject
instead of react-native init simpleapp
.
the problem facing when remove export default fro class error check awakeindevapp:
code of app.js:
import react 'react'; import { stylesheet, text, view, appregistry, button } 'react-native'; import { stacknavigator } 'react-navigation'; export default class app extends react.component { static navigationoptions = { title: 'welcome', }; render() { return ( <view> <text>hello, chat app!</text> <button onpress={() => navigate('chat')} title="chat lucy" /> </view> ); } } class chatscreen extends react.component { static navigationoptions = { title: 'chat lucy', }; render() { return ( <view> <text>chat lucy</text> </view> ); } } const simpleapp = stacknavigator({ home: { screen: app }, chat: { screen: chatscreen }, }); appregistry.registercomponent('simpleapp', () => simpleapp);
since you're using create-react-native-app, project template includes app.js , assume it's 1 mentioned in example, need remove appregistry.registercomponent('simpleapp', () => simpleapp); , replace export default simpleapp reason initialization of application done create-react-native-app , need give main component in case simpleapp navigator includes screen
const simpleapp = stacknavigator({ home: { screen: app }, chat: { screen: chatscreen }, });
see code below full example
code of app.js:
import react 'react'; import { stylesheet, text, view, appregistry, button } 'react-native'; import { stacknavigator } 'react-navigation'; class app extends react.component { static navigationoptions = { title: 'welcome', }; render() { return ( <view> <text>hello, chat app!</text> <button onpress={() => navigate('chat')} title="chat lucy" /> </view> ); } } class chatscreen extends react.component { static navigationoptions = { title: 'chat lucy', }; render() { return ( <view> <text>chat lucy</text> </view> ); } } const simpleapp = stacknavigator({ home: { screen: app }, chat: { screen: chatscreen }, }); export default simpleapp;
Comments
Post a Comment