RN初步尝试

发表于 | 分类于

这一个月内都在搞 RN，体会良多，在此总结一下

1.环境搭建

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

  • npm 设置:

1
2
3
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
  • 初试化项目:
1
react-native init ProjectName
  • 运行项目:
1
2
cd ProjectName
react-native run-android

2.导航器

  • 导航库:react-navigation

  • 使用方法:

1
2
npm install --save react-navigation
react-native link react-navigation
  • 项目实践:

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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 <RootStack />;
    }
}

隐藏头部导航栏：

1
2
3
static navigationOptions = {
    header: null,
};

自定义导航栏：

1
2
3
4
5
6
7
8
9
10
11
12
13
static navigationOptions = {
        title:'导航栏标题',
        headerStyle: {
            backgroundColor: '#383a4a',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            flex:1,
            color:'#ffffff',
            textAlign: 'center'
        },
        headerRight: (<View/>),
    };

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

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

3.数据请求

  • 我封装的方法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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:列表页展示、下拉刷新、上拉加载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
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 (
            <View style={styles.container}>
                    <FlatList
                        onRefresh={() => this._onRefresh()}
                        refreshing={this.state.isRefresh}
                        onEndReached={() => this._onLoadMore()}
                        onEndReachedThreshold={0.1}
                        keyExtractor={this._keyExtractor}
                        data={this.state.dataList}
                        renderItem={({item}) =>
                            <TouchableOpacity onPress={()=>{}}>
                                <Text>{item.name}</Text>
                            </TouchableOpacity>
                        }
                    />
            </View>
        );
    }
}

4.扫描功能

  • 扫描库: react-native-camera
  • 使用方法:
1
2
npm install --save react-native-camera
react-native link react-native-camera
  • 项目实践:

Camera.js:扫一扫功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
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 (
            <View style={styles.container}>
                <RNCamera
                    ref={ref => {
                        this.camera = ref;
                    }}
                    type={RNCamera.Constants.Type.back}
                    flashMode={RNCamera.Constants.FlashMode.on}
                    onBarCodeRead={this.onBarCodeRead.bind(this)}
                >
                    <View style={styles.curtain_top}/>
                    <View style={styles.curtain_mid}>
                        <View style={styles.mid_shadow}/>
                        <View style={styles.rectangleContainer}>
                            <Animated.Image
                                source={require('../images/scan_light.png')}
                                style={[styles.border,
                                    {transform: [{translateY: this.state.moveAnim}]}]}/>
                            <View style={styles.leftTop}>
                                <View style= />
                                <View style= />
                            </View>
                            <View style={styles.leftBottom}>
                                <View style= />
                                <View style= />
                            </View>
                            <View style={styles.rightTop}>
                                <View style= />
                                <View style= />
                            </View>
                            <View style={styles.rightBottom}>
                                <View style= />
                                <View style= />
                            </View>
                        </View>
                        <View style={styles.mid_shadow}/>
                    </View>
                    <View style={styles.curtain_bottom}/>
                </RNCamera>
            </View>
        );
    }
}