ReactNative 开发入门教程

ReactNative入门

1.ReactNative是什么？

ReactNative是Facebook开源的应用开发框架，允许你使用 JavaScript 开发原生的iOS应用和Android应用。

2.ReactNative有什么牛X的地方？

• 可以基于 React Native使用 JavaScript 编写应用逻辑，UI 则可以保持全是原生的。
• 开发者只需学习一种语言就能轻易为任何平台高效地编写代码 ios,andoird，pc
• ReactNative使用ReactJs语法进行开发，应用的 UI通过一个基于应用目前状态的函数来改变和表达

3.ReactNative核心思想

不是跨平台一次编写到处执行，而是一次学习跨平台开发。

4.ReactNative 组件

• 通用组件
  通用组件是ReactNative用js完全重构的组件，适用于ios环境和android环境，这种组件可以实现跨平台的代码复用。
  比如：
  view组件：视图组件

<View style={[styles.base, styles.background]}></View>

Text组件：显示文本组件

 <Text style={styles.baseText}></Text>

• 特殊组件
  特殊组件就是涉及到对应的手机系统定制的不同的组件，目前主要是正对ios系统和android系统有一定的区分

对应ios的组件，例如：NavigatorIOS：导航组件

<NavigatorIOS
      initialRoute={{
        component: MyView,
        title: 'My View Title',
        passProps: { myProp: 'foo' },
      }}
    />

对应的android组件，例如：ViewPagerAndroid：子视图切换组件

<ViewPagerAndroid
      style={styles.viewPager}
      initialPage={0}>
      <View style={styles.pageStyle}>
        <Text>First page</Text>
      </View>
      <View style={styles.pageStyle}>
        <Text>Second page</Text>
      </View>
    </ViewPagerAndroid>

5.ReactNative 调用原生Api

ReactNative还支持，调用对系统的一些API进行相关的操作，比如
回退按键功能调用，定位等等，通过调用系统的一些API可以是的ReactNative在进行APP编写时候具有更高的灵活性和扩展性，同时功能性也会增强很多

例如：BackAndroid：监听硬件的back键操作

BackAndroid.addEventListener('hardwareBackPress', function() {
     if (!this.onMainScreen()) {
       this.goBack();
       return true;
     }
     return false;
});

VibrationIOS:用于控制设备震动

VibrationIOS.vibrate() 调用这个函数会触发一个一秒钟的震动

<TouchableHighlight
        style={styles.wrapper}
        onPress={() => VibrationIOS.vibrate()}>
        <View style={styles.button}>
          <Text>Vibrate</Text>
        </View>
      </TouchableHighlight>

6.Hello ReactNative代码实现

1.开发环境准备（针对ios app开发）

1.1 ReactNative依赖Node.js环境进行代码运行所以首先需要进行Node的安装

推荐使用Homebrew进行Mac下软件的安装，没有安装HomeBrew的移步 [http://brew.sh/]安装Homebrew

在终端中输入以下命令:

brew install node

1.2 安装watchman

通过配置 watchman，React 实现了在代码发生变化时，完成相关的重建的功能。就像在使用 Xcode 时，每次保存文件都会进行一次创建。

brew install watchman

1.3 安装 React Native CLI 工具

react-native-cli是用来开发React Native的命令行工具

npm install -g react-native-cli

1.4 创建一个初始项目

浏览到你想要创建 React Native 应用的文件夹下，使用 CLI 工具构建项目：
构建一个名字为PropertyFinder的

react-native init PropertyFinder

1.5代码实现

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;
//样式具体看ReactJs语法
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  text:{
    color:'black',
    backgroundColor:'white',
    fontSize:30,
    margin:80
  }
})

var HelloRN = React.createClass({
  render: function() {
   return (
     <View style={styles.container}>
       <Text style={styles.welcome}>
         Welcome to React Native!
       </Text>
     </View>
   );
 }
})

//返回组件
//第一个参数：项目名称,第二个参数返回组件

React.AppRegistry.registerComponent('PropertyFinder',function(){return  HelloRN});

6.推荐网站

ReactNative中文网
http://react-native.cn/