2017-05-27 44 views
1

我刚开始作出反应本地开发,安装Expo,创建一个应用程序(的作品),安装react-navigation并使用从https://reactnavigation.org/docs/intro/的例子尝试的第一个StackNavigator例子。我从命令行运行npm run ios,并使用Nuclide IDE。所有这些对我来说都是全新的。StackNavigator标题中最简单的例子没有显示

的问题是,其上运行的例子中iOS的仿真器屏幕上显示这样的:

missing title bar

代替示出具有在其上“欢迎”标题栏。

作为一个初学者,我不知道该从哪里出发。这里是我的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,这引发了我没有错误示例代码,但在115个错误react-navigation包。他们大部分看起来像:identifier 'expect', could not resolve name

回答

1

最后,我找到了答案here:要在世博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);