React Native初体验

这一个月内，除去枸杞花鸟岛旅游的几天，其余时间都在搞RN，体会良多，在此总结一下

1.环境搭建

• 运行环境:Node8.3 / Python2.x / Jdk1.8 / Android8.0-Sdk

• npm设置:

npm install -g yarn react-native-cli
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

• 初试化项目:

react-native init ProjectName

• 运行项目:

cd ProjectName
react-native run-android

---

2.导航器

• 导航库:react-navigation

• 使用方法:

npm install --save react-navigation
react-native link react-navigation

• 项目实践:

App.js:负责注册各个子页面、设置首页

import React from 'react';
import { createStackNavigator } from 'react-navigation';
import Login from './ui/Login';
import Index from './ui/Index';

const RootStack = createStackNavigator(
    {
        Login: Login,
        Index: Index,
    },
    {
        initialRouteName: 'Login',
    }
);

export default class App extends React.Component {
    render() {
        return ;
    }
}

隐藏头部导航栏：

static navigationOptions = {
    header: null,
};

自定义导航栏：

static navigationOptions = {
        title:'导航栏标题',
        headerStyle: {
            backgroundColor: '#383a4a',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            flex:1,
            color:'#ffffff',
            textAlign: 'center'
        },
        headerRight: (),
    };

跳转页面、传递数据、接收数据：

this.props.navigation.navigate('Index',{
    person_name: 'Nero',
});
this.props.navigation.getParam('person_name')

---

3.数据请求

• 我封装的方法:

fetchJson(url, data, callback){
    var options = {
        method: 'POST',
        headers: {
            Accept: "application/json",
            "Content-Type": "application/json"
          },
        body:data
    };

    fetch(url, options)
        .then((response) => response.json())
        .then((responseText) => {
             callback(JSON.parse(responseText));
        }).done();
}

---

4.数据展示

• 可用组件: Flatlist / SectionList

• 项目实践:

Info.js:列表页展示、下拉刷新、上拉加载

export default class Details extends Component {
    _keyExtractor=(item)=>item.id;

    constructor(props){
        super(props);
        this.page=1;
        this.pageSize=20;
        this.state={
            dataList:[],
            isRefresh:false,
        };
    }

    componentDidMount() {
        this.achievePageData();
    }

    achievePageData(){
        let formData = new FormData();
        formData.append("id",1);
        fetchJson(REQUEST_URL,formData,(result) => {
            if(result.return_code==1){
                if(this.page===1){
                    this.setState({
                        dataList:result.return_data.pageList,
                    })
                }else{
                    this.setState({
                        dataList: this.state.dataList.concat(result.return_data.pageList)
                    })
                }
            }
        })
    }

    _onRefresh=()=>{
        if(!this.state.isRefresh){
            this.page = 1;
            this.achievePageData();
        }
    };

    _onLoadMore(){
        if (this.state.dataList.length%this.pageSize==0){
            this.page = this.page + 1;
            this.achievePageData()
        }
    }

    render() {
        return (
            
                     this._onRefresh()}
                        refreshing={this.state.isRefresh}
                        onEndReached={() => this._onLoadMore()}
                        onEndReachedThreshold={0.1}
                        keyExtractor={this._keyExtractor}
                        data={this.state.dataList}
                        renderItem={({item}) =>
                            {}}>
                                {item.name}
                            
                        }
                    />
            
        );
    }
}

---

4.扫描功能

• 扫描库: react-native-camera
• 使用方法:

npm install --save react-native-camera
react-native link react-native-camera

• 项目实践:

Camera.js:扫一扫功能

import React, {Component} from 'react';
import {Animated,Easing,ToastAndroid,Dimensions} from 'react-native';
import { RNCamera } from 'react-native-camera';

const REQUEST_URL="";
const {width, height}  = Dimensions.get('window');

export default class Camera extends Component {

    constructor(props) {
        super(props);
        this.state = {
            moveAnim: new Animated.Value(-120),
        };
    }

    componentDidMount() {
        this.startAnimation();
    }

    startAnimation = () => {
        this.state.moveAnim.setValue(-120);
        Animated.timing(
            this.state.moveAnim,
            {
                toValue: 120,
                duration: 2500,
                easing: Easing.linear
            }
        ).start(() => this.startAnimation());
    };
    //  识别二维码
    onBarCodeRead = (e) => {
        ToastAndroid.show(e.data,ToastAndroid.SHORT);
    };

    render(){
        return (
            
                 {
                        this.camera = ref;
                    }}
                    type={RNCamera.Constants.Type.back}
                    flashMode={RNCamera.Constants.FlashMode.on}
                    onBarCodeRead={this.onBarCodeRead.bind(this)}
                >
                    
                    
                        
                        
                            
                            
                                
                                
                            
                            
                                
                                
                            
                            
                                
                                
                            
                            
                                
                                
                            
                        
                        
                    
                    
                
            
        );
    }
}

---