React Native 用法介绍

React Native 用法介绍

一、简介

React Native是Facebook的一个开源框架，RN提供了是一种更高效更低成本的开发方式，用RN开发的页面具有跨平台、易扩展、运行流畅并且支持动态更新等特点。

通过一个例子来了解RN的基本用法，包括JS布局、页面跳转、网络请求等内容

二、示例

实现用户登录操作，输入用户名密码点击登录按钮跳转到用户资料页，点击返回可回到登录页。

// LoginPageComponent.js(登录页)

// ProfilePageComponent.js(用户资料页)

首先页面入口是index.android.js，每一个JS页面对应一个Component,页面在render()中完成渲染，而页面跳转是通过Navigator来实现的，在Navigator指定默认显示的页面，这里是LoginPageComponent，configureScene设置页面跳转动画，route.params携带页面参数，代码如下：

//index.android.js

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

import LoginPageComponent from "./LoginPageComponent";
export default class AwesomeProject extends Component {
  constructor(props) {
    super(props);
  }
  render() {  
        let defaultName = 'LoginPageComponent';  
        let defaultComponent = LoginPageComponent;  
        return (  
           <Navigator  
              //这个指定了默认的页面
              initialRoute={{ name: defaultName, component: defaultComponent }}  
              //这个是页面之间跳转时候的动画，具体有哪些？可以看这个目录下
              configureScene={(route) => {
                return Navigator.SceneConfigs.HorizontalSwipeJumpFromRight;  
              }}  

              renderScene={(route, navigator) => {  
                let Component = route.component;
                //navigator作为props传递给了这个component 
                return <Component {...route.params} navigator={navigator} />  
              }} />  
        );  
    }
}

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

在看下登录页的实现，输入框使用TextInput，按钮用的Button，点击按钮响应_pressLogin接口，并通过fetch调用登录接口，接口返回登录成功，则调用navigator.push跳转到ProfilePageComponent.js，传递参数：name、pwd。

// LoginPageComponent.js
import React, { Component } from 'react';  
import {  
  AppRegistry,  
  StyleSheet,  
  Text,  
  Navigator,  
  TouchableOpacity,  
  View,
  Button,
  Alert,
  TextInput
} from 'react-native';  

import ProfilePageComponent from "./ProfilePageComponent";  

export default class LoginPageComponent extends Component {  

    constructor(props){  
      super(props);  
      this.state = {
        name:'',
        pwd:''
      };

    }

    render() {  

      return (
          <View style={styles.counter}>  
            <Text style={styles.titleStyle}>登录</Text>
            <TextInput
              style={styles.inputStyle}
              underlineColorAndroid='transparent'
              placeholder="input userName"
              onChangeText={(name) => this.setState({name})}/>

            <TextInput
              style={styles.inputStyle}
              underlineColorAndroid='transparent'
              placeholder="input password"
              onChangeText={(pwd) => this.setState({pwd})}/>

             <Button
              onPress={()=>{
                this._pressLogin();
              }}
              title="Submit"
              accessibilityLabel="See an informative alert"/>

          </View>  
      );

    }  

    _pressLogin(){
      console.log("click login button");
      if (this.state.name.trim().length == 0) {
        Alert.alert("please input user name");
        return;
      }

      if (this.state.pwd.trim().length == 0) {
        Alert.alert("please input password");
        return;
      }
      var formData = new FormData();
      formData.append("name", this.state.name.trim());
      formData.append("pwd", this.state.pwd.trim());

      fetch("http://10.4.33.125:8080/DemoApi/login",{method:'POST',
        body:formData})
      .then((response) => response.json())
      .then((responseData) => {
        var obj = JSON.parse(JSON.stringify(responseData));
        if (obj.code == 200) {
          const {navigator} = this.props;  
          if(navigator) {
            navigator.push({
                name: 'ProfilePageComponent',  
                component: ProfilePageComponent,
                params:{  
                    name: this.state.name,  
                    pwd: this.state.pwd
                }
            })
        } else {
          Alert.alert("账号密码错误");
        }
      }

      }).catch((error) => { 
       console.log(error);
      }).done();


    }  
}  

const styles = StyleSheet.create({  
    counter:{  
      flex:1, 
      backgroundColor:'#e8e8e8',
      padding:20
    },
    titleStyle:{
      height:50,
      color: 'blue',
      fontSize: 30,
      textAlign:'center',
      marginTop:80,
      marginBottom:10
    },
    inputStyle:{
      backgroundColor:'#fff',
      height:35,
      marginBottom:20,
      padding:10,
    }

});  

最后到用户信息页面，通过navigator.pop();回到登录页

 // ProfilePageComponent.js
import React, { Component } from 'react';  
import {  
  AppRegistry,  
  StyleSheet,  
  Text,  
  Navigator,  
  TouchableOpacity,  
  View  
} from 'react-native';  

import LoginPageComponent from './LoginPageComponent';  

export default class ProfilePageComponent extends Component {  

    constructor(props){  
      super(props);  
      this.state = {  
          name: '',
          pwd:''
      };
    }

    _pressButton() {
        const {navigator} = this.props;
        if (navigator) {  
            //把当前的页面pop掉，这里就返回到了上一个页面:LoginPageComponent  
            navigator.pop();
        }
    }

    componentDidMount() {  
      this.setState({name:this.props.name});
      this.setState({pwd:this.props.pwd});
    }  

    render() {  
        return (  
            <View style={styles.counter}>  
                <Text>用户名:{this.state.name}, 密码:{this.state.pwd}</Text>  
                <TouchableOpacity onPress={()=>{this._pressButton()}}>  
                    <Text>点我跳回去</Text>
                </TouchableOpacity>
            </View>
        );  
    }

}

const styles = StyleSheet.create({  
    counter:{  
      flex:1,  
      justifyContent:'center',  
      alignItems:'center',  
      backgroundColor:'#e8e8e8'  
    }  
});  

三、打包APK

1.生成签名文件，-alias对应的别名自己命名，这里是cy-key

$ keytool -genkey -v -keystore my-release-key.keystore -alias cy-key -keyalg RSA -keysize 2048 -validity 10000

这条命令会要求你输入密钥库（keystore）和对应密钥的密码，然后设置一些发行相关的信息。最后它会生成一个叫做my-release-key.keystore的密钥库文件。

2.把my-release-key.keystore文件放到你工程中的android/app文件夹下。

3.编辑~/.gradle/gradle.properties，添加如下的代码（注意把其中的星号替换为相应密码）

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=cy-key
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****

4.添加签名到应用的gradle配置文件#android/app/build.gradle

android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            storeFile file(MYAPP_RELEASE_STORE_FILE)
            storePassword MYAPP_RELEASE_STORE_PASSWORD
            keyAlias MYAPP_RELEASE_KEY_ALIAS
            keyPassword MYAPP_RELEASE_KEY_PASSWORD
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
}

5.将js文件打包成bundle，存放到assets目录下，执行assembleRelease打包apk

$ mkdir -p android/app/src/main/assets
$ react-native bundle --platform android --dev false --entry-file index.android.js \
  --bundle-output android/app/src/main/assets/index.android.bundle \
  --assets-dest android/app/src/main/res/

// windows
$ cd android && ./gradlew assembleRelease

// mac
$ cd android && gradle assembleRelease

RN环境搭建和JS相关参考如下

1.RN环境搭建
https://reactnative.cn/docs/0.45/getting-started.html#content

2.打包apk
http://reactnative.cn/docs/0.27/signed-apk-android.html

3.JS入门
http://es6.ruanyifeng.com/#docs/intro

4.JS在线编译
http://jsrun.net/new