快速构件运行app

安装依赖环境

brew install node
brew install watchman
(sudo) npm install -g react-native-cli

生成项目
```
react-native init demo
```
构件运行
```
react-native run-ios
```

非mac用户或者遇到安装问题,请看这里

调试技巧

执行上面命令后, 会自动启动模拟器, ctrl+command+z 可以调出调试菜单.

其中 Reload 可以刷新app页面,让js代码的更改立刻生效,

而 Enable Remote JS Debugging 则调出Chrome的开发者工具, 可以看到异常, 打印日志, 使用debugger断点.

console.log('something');
debugger;

react-native基础

先阅读代码

import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

class MyComponent extends Component {
  render(){
    return (
        <Text>hello {this.props.text}</Text>
    )
  }
}
class HelloWorldApp extends Component {
  render() {
    return (
      <MyComponent text="world">
    );
  }
}

AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

react-native的js文件是通过babel解析,直接支持es6和jsx语法.

react-native的基本开发流程就是使用内置组件定义自己的组件,在每个自定义组件中实现自己的业务功能.

组件都继承Component, 类方法中的this有两个重要属性分别是this.props和this.states

props和states的字段值变更时, ui会自动发生变更, 从而数据到页面的实现单向绑定

props是标签里面的属性, 组件之前通过标签的属性来传递数据, 子节点想获取根节点的数据时, 最直接方法是每一个节点都把数据写到标签的属性上.

states是组件中的状态, 内部的事件方法或者生命周期方法都可以调用this.setState来变更, 如:

class Timer extends Component {
  componentDidMount() {
    let that = this;
    setInterval(function () {
      that.setState({cnt:that.state.cnt+1})
    }, 1000);
  }
  render(){}
}

其中componentDidMount是一个组件实例化后的回调

react-native 交互

点击事件定义

class Touch extends Component {
  handlePress() {
    console.log('press')
  }
  render() {
    return (
      <TouchableHighlight onPress={this.handlePress}>
        <Text>i'm button</Text>
      </TouchableHighlight>
    );
  }
}

react-native使用TouchableHighlight组件处理点击事件, 方法是把需要响应点击的组件包裹着

注意TouchableHighlight是必须只有一个直属子节点(render方法也是)

多页面开发

使用官方Navigator组件可以实现页面导航.

class Page1 entends Component {

  render(){
    <TouchableHighlight
      onPress={this.props.navigator.push({route:'详情页'})}>
      <Text>详情</Text>
    </TouchableHighlight>
  }
}

class Page2 entends Component {
  //getData(){
  //  var that = this;
  //  fetch(url).then((data)=>{that.setState(data:data)});
  //}
  render(){
    <View>
      <TouchableHighlight onPress={this.props.navigator.pop()>
        <Text>返回</Text>
      </TouchableHighlight>
    </View>
  }
}

class App extends Component {
  render (
    <Navigator
        initialRoute={{name: '首页', index: 0}}
        renderScene={(route, navigator) =>
          if(route.name === '首页'){
            return <Page1 navigator={navigator}/>
          }
          if(route.name === '详情页'){
            return <Page2 navigator={navigator}/>
          }
        }
      />
  )

}

打包发布

android
1. 生成离线包
react-native bundle --platform android --entry-file index.android.js --bundle-output ./bundles/index.android.bundle --dev false
1. 配置签名
2. 生成apk cd android && ./gradlew installRelease
ios
1. 生成离线包
react-native bundle --platform ios --entry-file index.ios.js --bundle-output ./bundles/index.ios.bundle --dev false
1. 原生代码中使用离线包
2. 使用xcode生成ipa

原文链接