我刚刚启动了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
。
答案 0 :(得分: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);