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

Posted 2023-02-19

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

【英文标题】：StackNavigator title not showing in simplest example

【发布时间】：2017-10-28 09:28:39

【问题描述】：

我刚刚开始 React Native 开发，安装了 Expo，创建了一个应用程序（工作），安装了 react-navigation，并使用来自 https://reactnavigation.org/docs/intro/ 的示例尝试了第一个 StackNavigator 示例。我从命令行运行npm run ios，并使用Nuclide IDE。所有这些对我来说都是全新的。

问题是，在运行示例时，iOS 模拟器中的屏幕显示如下：

而不是显示带有“欢迎”的标题栏。

作为一个初学者，我不知道从哪里开始。这是我的 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"
  

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

  "expo": 
    "sdkVersion": "17.0.0"
  
 

我还添加了flow，这在示例代码中没有抛出任何错误，但在react-navigation 包中出现了115 个错误。他们中的大多数看起来像：identifier 'expect', could not resolve name。

【参考方案1】：

最后我找到了答案here：要在Expo XDE 中使用reactnavigation.org 上的示例，您必须进行一些更改。以下是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);