StackNavigator title not showing in simplest example

问题

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 https://reactnavigation.org/docs/intro/. 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:

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.

回答1:

In the end I found the answer here: To use the examples on reactnavigation.org in Expo XDE, you have to make some changes. Here are the changes necessary for the first example:

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);

来源：https://stackoverflow.com/questions/44219316/stacknavigator-title-not-showing-in-simplest-example

标签

react-native

react-navigation

expo