StackNavigator 标题未在最简单的示例中显示

问题描述

我刚刚开始 React Native 开发，安装了 Expo，创建了一个应用程序(作品)，安装了 react-navigation 并使用

而不是显示带有欢迎"的标题栏.

作为一个初学者，我不知道从这里去哪里.这是我的 package.json:

{名称":rnproject"，版本":0.1.0"，私人":真的，开发依赖":{"babel-cli": "^6.24.1","babel-preset-flow": "^6.23.0",流箱":0.42.0"，开玩笑博览会":〜1.0.1"，反应原生脚本":0.0.30"，反应测试渲染器":16.0.0-alpha.6"},"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",脚本":{"start": "react-native-scripts start","eject": "react-native-scripts 弹出","android": "react-native-scripts android","ios": "react-native-scripts ios",测试":节点 node_modules/jest/bin/jest.js --watch"},开玩笑":{预设":开玩笑博览会"},依赖":{"世博": "^17.0.0",反应":16.0.0-alpha.6"，反应原生":^0.44.0"，反应导航":^1.0.0-beta.11"}}

有一个包含这些内容的 app.json 文件:

{世博会":{sdkVersion":17.0.0"}}

我还添加了 flow，这在示例代码中不会引发任何错误，但在 react-navigation 包中会出现 115 个错误.它们中的大多数看起来像:identifier 'expect', could not resolve name.

解决方案

最后我找到了答案这里:要在 Expo XDE 中使用 reactnavigation.org 上的示例，您必须进行一些更改.以下是第一个示例所需的更改:

从'expo'导入Expo；//<--- 包括这一行从反应"导入反应；进口 {AppRegistry,//<- 删除这一行文本，} 来自 'react-native';从反应导航"导入 { StackNavigator }；类 HomeScreen 扩展 React.Component {静态导航选项 = {标题:欢迎"，};使成为() {return <Text>你好，导航！</Text>;}}常量 SimpleApp = StackNavigator({主页:{屏幕:HomeScreen}，});//更改以下行:AppRegistry.registerComponent('SimpleApp', () => SimpleApp);//进入:Expo.registerRootComponent(SimpleApp);

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.

解决方案

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

这篇关于StackNavigator 标题未在最简单的示例中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！