2,1步入React Native(window教程)

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
2,1步入React Native(window教程)_第1张图片
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 (
      
        
          Hello world!
        
        
          To get started, edit index.android.js
        
        
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        
      
    );
  }
}
/***
 * 第三部分
 * 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);

本文参考于http://reactnative.cn/docs/0.42/getting-started.html

你可能感兴趣的:(2,1步入React Native(window教程))