19901

StackNavigator title not showing in simplest example

Question:

I just started React Native development, installed Expo, created an app (works), installed react-navigation and tried the first StackNavigator example using the example from <a href="https://reactnavigation.org/docs/intro/" rel="nofollow">https://reactnavigation.org/docs/intro/</a>. I am running npm run ios from the commandline, and using Nuclide IDE. All of which are completely new to me.

The problem is, that on running the example the screen in the iOS emulator shows this:

<a href="https://i.stack.imgur.com/uimHE.png" rel="nofollow"><img alt="missing title bar" class="b-lazy" data-src="https://i.stack.imgur.com/uimHE.png" data-original="https://i.stack.imgur.com/uimHE.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

Instead of showing a title bar with 'Welcome' on it.

As a beginner I have no clue where to go from here. Here's my package.json:

{ "name": "rnproject", "version": "0.1.0", "private": true, "devDependencies": { "babel-cli": "^6.24.1", "babel-preset-flow": "^6.23.0", "flow-bin": "0.42.0", "jest-expo": "~1.0.1", "react-native-scripts": "0.0.30", "react-test-renderer": "16.0.0-alpha.6" }, "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js", "scripts": { "start": "react-native-scripts start", "eject": "react-native-scripts eject", "android": "react-native-scripts android", "ios": "react-native-scripts ios", "test": "node node_modules/jest/bin/jest.js --watch" }, "jest": { "preset": "jest-expo" }, "dependencies": { "expo": "^17.0.0", "react": "16.0.0-alpha.6", "react-native": "^0.44.0", "react-navigation": "^1.0.0-beta.11" } }

there's an app.json file with these contents:

{ "expo": { "sdkVersion": "17.0.0" } }

I also added flow, which throws me no errors in the example code, but 115 errors in the react-navigation package. Most of them look like: identifier 'expect', could not resolve name.

Answer1:

In the end I found the answer <a href="https://snack.expo.io/SksoGXR0l" rel="nofollow">here</a>: To use the examples on reactnavigation.org in <strong>Expo XDE</strong>, you have to make some changes. Here are the changes necessary for the <a href="https://reactnavigation.org/docs/intro/#Introducing-Stack-Navigator" rel="nofollow">first example</a>:

import Expo from 'expo'; // <--- include this line import React from 'react'; import { AppRegistry, // <- remove this line Text, } from 'react-native'; import { StackNavigator } from 'react-navigation'; class HomeScreen extends React.Component { static navigationOptions = { title: 'Welcome', }; render() { return <Text>Hello, Navigation!</Text>; } } const SimpleApp = StackNavigator({ Home: { screen: HomeScreen }, }); // change the following line: AppRegistry.registerComponent('SimpleApp', () => SimpleApp); // into: Expo.registerRootComponent(SimpleApp);

Recommend

  • Android Studio memory usage Ubuntu 16
  • Logging broadcast Intents and manually trigger them (Android)
  • Windows Phone 7 sniffer
  • Saving image file path to sqlite database
  • Is Android development possible on netbooks? [closed]
  • css font-size and line-height not matching the baseline
  • Certain Arabic text gets incorrectly shown while other Arabic text gets showed normally?
  • NSMutableArray instance used in a block
  • XOR with Neural Networks (Matlab)
  • pymongo replication secondary readreference not work
  • How to implement Deep Linking in Roku SG application?
  • Android cannot disable cut copy paste
  • ASP.NET MVC 2 Preview 2 - display directory list rather than home/index
  • where do I find the xml.dom python package for the python-2.6.0-8.9.28 and I have a suse/x86_64 vers
  • Spring boot 2.0.0.M4 required a bean named 'entityManagerFactory' that could not be found
  • Read text file that is not in the main package in a runnable jar
  • Roxygen error “Skipping invalid path”
  • ActiveRecord query for a count of new users by day
  • Play WS (2.2.1): post/put large request
  • Cannot resolve symbol 'MyApi'
  • Different response to non-authenticated users and AJAX calls
  • Controls, properties, events and timers running in design time
  • Deserializing XML into class C#
  • Updated Ionic CLI but shows previous version (Windows)
  • Javascript + PHP Encryption with pidCrypt
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • how to add data labels for bar graph in matlab
  • How to include full .NET prerequisite for Wix Burn installer
  • Getting Messege Twice Using IMvxMessenger
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Can Visual Studio XAML designer handle font family names with spaces as a resource?
  • Is it possible to post an object from jquery to bottle.py?
  • sending mail using smtp is too slow
  • Busy indicator not showing up in wpf window [duplicate]
  • costura.fody for a dll that references another dll
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • How can i traverse a binary tree from right to left in java?
  • How can I use `wmic` in a Windows PE script?
  • How can I use threading to 'tick' a timer to be accessed by other threads?
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize