2，1步入React Native(window教程)
2017-03-27 本文已影响10人
SYOL
1，配置环境
开发工具：webstrom，Genymotion(安卓模拟器),Android Studio(负责编译)，Oracle(虚拟机)在这里苹果的开发配置就不说了。（因为需要MAC电脑）
2，可能会遇到的问题。
- Genymotion无法正常启动，需要开启Oracle(虚拟机)，之后就可以正常使用了。
- react-native run-anroid 之后无法正常使用。进入项目demo 点击进入 android =>app=>build=>outputs=>apk 找到app-debug文件，把其拖入到Genymotion中就可以了。
3，开始编程
- 创建项目打开git bash here (类似window的cmd) ，输入 react-native init demo(项目名) ，建议不要使用中文，我没有用过，你可以去尝试。
- 创建好之后点击进入demo的根目录，有git bash here 里面输入react-native run-android (这里是运行安卓系统)，当然你在运行项目的时候必须打开Genymotion。
- 开始码字，来一个我们熟悉的“Hello world!”。点击打开 index.android.js
Paste_Image.png
- index.android.js 文件详解
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
/***
* 第一部分
* 导入ReactNative包，导入ReactNative组件
* AppRegistry,//JS运行所有reactNative组件
* StyleSheet,//reactNative中是中的使用样式表，类似CSS的样式表
* Text,//开发过程中使用的组件 View///开发过程中使用的组件
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
/***
* 第二部分
* 是ES6语法
* 创建ReactNative组件
* render() {}
*/
export default class demo extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Hello world!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</Text>
</View>
);
}
}
/***
* 第三部分
* StyleSheet.create创建样式实例
* 在应用中只会被创建一次，不用每次在渲染周期中重新创建
*/
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,
},
});
/***
* 第四部分
* 注册入口组件
* AppRegistry:负责注册运行ReactNative应用程序的JavaScript入口
* registerComponent:注册应用程序的入口组件。告知ReactNative哪一个组件被注册为应用的跟容器
* ()=>demo 返回的必须是定义的组件类的名字
*/
AppRegistry.registerComponent('demo', () => demo);
