react-native

前段時間公司項目比較趕, 沒時間寫文章, 這兩天閑下來了, 總結了一下, 寫了一篇比較綜合的UI項目, 登錄注冊模塊, 包含UI 網絡請求等功能, 希望對大家理解React Native的界面布局和網絡請求有一定的幫助.

項目可到github下載: https://github.com/YTiOSer/YTReact-Native_LoginUI

1.頭文件

這個項目中用到了多個UI控件和導航, 所以需要引入多個控件和React Navigation,導航的使用方法上篇文章已經講述, 這里就不再講了,代碼如下所示:

import React, { Component } from 'react';
import { createStackNavigator } from 'react-navigation';
import ButtonView from './ButtonView';
import RegistView from './regist/RegistView';

import {
  Platform,
  StyleSheet,
  Text,
  View, 
  TextInput, 
  Button,
  Alert,
  Fetch,
  Dimensions,
} from 'react-native';

2. 封裝控件

項目中針對按鈕ButtonView進行了封裝, 頁面中使用的按鈕都可以使用封裝的控件, 這樣方便管理和使用, 代碼在ButtonView.js目錄下, 具體封裝代碼如下:

export default class ButtonView extends React.Component {

    static defaultProps = {
        btnName: 'Button',
        underlayColor: 'gray',
    };

    constructor(props) {
        super(props);
    }

  render() {
    return (
        <View style = {styles.container}>
            <TouchableHighlight
                style={[styles.btnDefaultStyle,this.props.btnStyle,styles.center]}
                activeOpacity={0.5}
                underlayColor={this.props.underlayColor}
                onPress={this.props.onPress}>

                <Text style={[styles.textDefaultStyle, this.props.textStyle]}>{this.props.btnName}</Text>

            </TouchableHighlight>
        </View>

        );
  }
}

3. 宏定義字段

項目開發(fā)中經常會使用到當前設備的屏幕寬高, 或者自定義常使用的字段, 這時候統(tǒng)一定義成宏方便使用.

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

const PWRightWid = 100;

4. 定義綁定事件

在登錄注冊頁面中, 我們經常需要獲取到登錄的用戶名,密碼,驗證碼,手機號等字段, 這時候在React Native中就需要定義對應的字段綁定后來獲取.

    this._getUserName = this._getUserName.bind(this); //獲取用戶名
    this._getUserPW = this._getUserPW.bind(this); //獲取密碼
    this._onClickLogin = this._onClickLogin.bind(this); //登錄
    this._getPhoneCode = this._getPhoneCode.bind(this); //獲取驗證碼
    this._onClickSIM = this._onClickSIM.bind(this); //點擊切換賬號手機號登錄
    this._onClickForgetPW = this._onClickForgetPW.bind(this); //點擊忘記密碼
    this._hiddenGetCodeBtn = this._hiddenGetCodeBtn.bind(this); //隱藏獲取驗證碼

5. 碼UI點擊事件處理

頁面肯定需要碼UI, 代碼比較簡單, 只是控件使用和布局, 這里就不過多講, 這里詳細介紹下對應的點擊事件處理, 每個按鈕的 onPress 和輸入框的 onChangeText中都要進行處理, 來獲取對應的值和邏輯處理.

(1). 首先需要在控件中定義點擊事件和協議

TextInput輸入框控件, 可以使用onChangeText 來獲取輸入的內容:

<TextInput style={styles.inputViewStyle}
                       onChangeText = {(text) => {
                          this.setState({userName: text});
                     }}
                      placeholder="請輸入手機號"
                  />

Button按鈕, 可以使用 onPress 來處理點擊事件:

 <ButtonView 
        btnName='獲取驗證碼'
        btnStyle = {{width: 90,marginRight: 10, backgroundColor: '#D6D6D6'}}
                      onPress = {this._getPhoneCode}
        textStyle = {{color:'gray', justifyContent: 'flex-end',}}
  ></ButtonView>

(2). 處理事件

TextInput使用onChangeText,獲取對應輸入的值:

  _getUserName = () => {
    alert('A name was submitted: ' + this.state.userName);
  };

Button使用onPress響應點擊事件:

  _onClickLogin = () => {
    var usrInfo = "用戶名：" + this.state.userName + "密碼：" + this.state.userPW
    Alert.alert(usrInfo);

  };

6. 網絡請求

本項目是基于登錄來介紹, 在獲取到對應的用戶名密碼或手機號驗證碼后, 需要請求接口傳給后臺來進行驗證登錄, 這里給大家介紹下fetch網絡請求, 使用方便,簡單易懂, 大家新手可以先使用這個, 后續(xù)介紹其它的方法.

 getUsrInfo = () => {

      fetch('http://...')
      .then((response) => response.json())
      .then((responseJson) => {

          this.state.userName = responseJson.status.code;
          this.state.userPW = responseJson.status.msg;

          this.setState({'userName':responseJson.status.code, 'userPW':responseJson.status.msg});
          
          return "responseJson.movies";
      })
      .catch((error) => {
          console.error(error);
      });
  }

7. 注冊

因為登錄頁面需要使用到注冊, 所以需要使用導航控制器來進行跳轉, 這個上篇文章已經詳細介紹過, 這里使用了RootView和自定義的RegistView.

export default createStackNavigator({
  Home: {
    screen: RootView
  },
  Details:{
    screen: RegistView
  },
});

正常的注冊頁面和登錄其實邏輯相似, 所以在項目中我就想再介紹一個知識, 就是在注冊頁面中, 為大家介紹下FlatList使用自定義cell的情況.

(1)創(chuàng)建RegistCell

//創(chuàng)建RegistCell
export default class RegistCell extends React.Component {

    constructor(props) {
    super(props);
  }

  render() {

    // const {name, full_name} = this.props.item.item || {};
    let name = this.props.item.item.name;
    let full_name = this.props.item.item.owner.node_id;

    console.log(`===>message cell props, ${name}, ${full_name}`, this.props.item.item)

    return (
      <View style={styles.container}>
        <TouchableOpacity
          onPress={() => console.log('item clicked')}
          style={styles.touchable}>
          <View style={styles.touchableInside}>
            <Image
              source={require('./img/graphql_wx.jpg')}
              style={styles.image}
              resizeMode={Image.resizeMode.stretch} />
            <View style={styles.insideView}>
              <Text style={styles.insideText}>{name}</Text>
              <Text style={styles.insideText}>{full_name}</Text>
            </View>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}

(2)創(chuàng)建完cell后, renderItem注冊cell.

renderItem = (item) => (
    <RegistCell item={item} />
  )

(3)創(chuàng)建FlatList,調用自定義RegistCell

 render() {

    return (

      <View style={styles.container}>
        <Text>Message</Text>
        <FlatList
          data={this.state.data || []}
          renderItem={this.renderItem}
          keyExtractor={item => item.id}
          // onRefresh={this.handleRefresh}
          onEndReachedThreshold={0} />
      </View>
    );
  }

簡單的三步即可實現使用FlatList并自定義cell.

到這里, 基于 React Navigation 的登錄注冊頁面的所有地方就完成了, 想看詳細代碼和運行效果的可到GitHub下載代碼: https://github.com/YTiOSer/YTReact-Native_LoginUI, 里面有完整的代碼.

您的支持是我的動力, 如果對您有所幫助的話, 不妨給個喜歡和關注哈!