我今天开始使用React-Native。我正在关注网络教程。
我的Windows机器上是否正确安装了所有设备:
然后安装react-native
npm install -g react-native-cli
最后是一个问候世界项目
react-native init albums
我没有收到任何错误。我的应用程序完全在我的Android手机上运行(基本上已加载)。
app.js有点选择平台:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
export default class App extends Component<{}> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit App.js
</Text>
<Text style={styles.instructions}>
{instructions}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
我只想知道生成这些文件是否正常。 我要创建这两个索引文件吗?或者最新的react-native不需要2个单独的文件? (我关注的教程是2017年1月)
答案 0 :(得分:40)
这是为react-native添加的新功能。新项目模板现在不包含两个单独的文件。如果您愿意,您仍然可以像以前一样创建和使用,但是按照原样使用它是正常的。它只是一个偏好和您的项目的要求。您可以在here上找到有关更改的更多信息。
来自提交说明
这一变化(最初讨论于 react-community/create-react-native-app#26)移动HelloWorld 项目模板来自两个几乎相同的入口点 (
index.android.js
和index.ios.js
)到一个单一的,最小的index.js
入口点。根组件在App.js
中创建。 这统一了react-native init
和App.js
之间的项目结构 创建React Native App并允许CRNA的弹出使用入口点 来自HelloWorld模板,没有任何黑客来定制它。也 文档中的示例可以以同样的方式复制粘贴到AppRegistry.registerComponent
在HelloWorld和CRNA应用程序中,无需先了解for (int i = 0; i < grid_caseTypes.Items.Count; i++) { for (int j = 0; j < grid_caseTypes.Columns.Count; j++) { var test = grid_caseTypes.Columns[j].GetCellContent(grid_caseTypes.Items[i] ) as TextBlock; if (test!=null) table.AddCell(test.Text); } }
。
答案 1 :(得分:0)
仅仅因为新的项目模板现在没有单独包含index.android.js和index.ios.js。它现在只包含一个最小的index.js入口点。
如果您想为两个/其中一个平台执行特定操作 然后你可以创建自己的index.android.js和index.ios.js文件 然后只需从index.js文件中导入它们中的代码 在那里做必要的改变。
index.android.js和index.ios.js可以写成:
import Render from './App';
export default Render;