ReactNative开发——自定义组件

一、页面文件

index.js

import {sum} from './TestComponent'

import { AppRegistry } from 'react-native';
import {StackNavigator} from 'react-navigation'
import RegisterScene from './RN/com.kangxg.custom/RegisterScene';
import WaitingScene from './RN/com.kangxg.custom/WaitingScene';
const Project = StackNavigator({
    Register: {screen: RegisterScene},
    Waiting: {screen: WaitingScene},
});
AppRegistry.registerComponent('untitled', () => Project);

RegisterScene.js

导入方法
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    TextInput,
    BackHandler,
    Dimensions,
    View
} from 'react-native';

import registerStyles from '../../res/styles/registerStyles';

import ConfirmDialog from './ConfirmDialog';

export default class RegisterScene extends Component<Props> {
    static navigationOptions = {
        title: '注册页面'
    }

    constructor(props) {
        super(props);
        this.state = {
            inputedNum: '',
            inputedPW: '',
            needToConfirm: false,
        }
    }

    userPressConfirm() {
        this.setState((state) => {
            return {needToConfirm: true}
        });
    }
    userConfirmed() {
        this.setState((state) => {
            return {needToConfirm: false};
        });

        //跳转页面
        this.props.navigation.navigate('Waiting', {
            phoneNumber: this.state.inputedNum, userPw: this.state.inputedPW,
        });
    }
    userCanceled() {
        this.setState((state) => {
            return {needToConfirm: false};
        });
    }


    componentDidMount() {
        console.log("Register Did Mount.");
    }

    componentWillUnmount() {
        console.log("Register Will Unmount.");
        // BackHandler.removeEventListener("hardwareBackPress")
    }

    componentWillUpdate() {
        console.log("Register will Upldate");
    }
    componentWillMount() {
        console.log("Register Will Mount");
        // BackHandler.addEventListener("hardwareBackPress",function () {
        //     console.log("PressHardwareBack")
        //     return true;
        // })
    }

    componentDidUpdate() {
        console.log("Register Did Update");
    };

    updateNum(newText) {
        this.setState((state) => {
            return {
                inputedNum: newText,
            }
        });//{inputedNum}
    }
    updatePw(newText) {
        this.setState(() => {
            return {
                inputedPW: newText
            }
        });
    }


    shouldComponentUpdate() {
        // if (this.state.inputedNum.length < 3) return false;
        return true;
    }
    renderWithDialog() {
        return (
            <View style={registerStyles.container}>
                <TextInput style={registerStyles.numberInputStyle}
                           placeholder={'请输入手机号'}
                           onChangeText={(newText) => this.updateNum(newText)}
                />
                <Text style={registerStyles.textPromptStyle}>
                    您输入的手机号码：{this.state.inputedNum}
                </Text>

                <TextInput style={registerStyles.passwordInputStyle}
                           placeholder={'请输入密码'}
                           secureTextEntry={true}
                           onChangeText={(newText) => this.updatePw(newText)}
                />
                <Text style={registerStyles.bigTextPrompt}
                      onPress={() => this.userConfirmed()}
                >
                    确 定
                </Text>

                {/*传入参数*/}
                <ConfirmDialog
                    userConfirmed={this.userConfirmed.bind(this)}
                    userCanceled={this.userCanceled.bind(this)}
                    promptToUser={'使用' + this.state.inputedNum + '号码登录?'}
                />
            </View>
        );
    }
    render() {
        /*判断如果需要出现对话框，就显示带有对话框的页面*/
        if (this.state.needToConfirm)
            return this.renderWithDialog();
        return (

            <View style={registerStyles.container}>
                <TextInput style={registerStyles.numberInputStyle}
                           placeholder={'请输入手机号'}
                           onChangeText={(newText) => this.updateNum(newText)}
                />
                <Text style={registerStyles.textPromptStyle}>
                    您输入的手机号码：{this.state.inputedNum}
                </Text>

                <TextInput style={registerStyles.passwordInputStyle}
                           placeholder={'请输入密码'}
                           secureTextEntry={true}
                           onChangeText={(newText) => this.updatePw(newText)}
                />
                <Text style={registerStyles.bigTextPrompt}
                      onPress={() => this.userPressConfirm()}
                >
                    确 定
                </Text>
            </View>
        );
    }
}

WaitingScene.js

import React, {Component} from 'react';
import {View, Text, StyleSheet,BackHandler} from 'react-native';
import WaitingStyles from '../../res/styles/WaitingStyles';

export default class WaitingScene extends Component {

    static navigationOptions = {
        title:'等待'
    }

    goBack() {
        this.props.navigation.goBack();
    }

    componentDidMount() {
        console.log("WaitingLeaf Did Mount.");
    }

    componentWillUnmount() {
        console.log("WaitingLeaf Will Unmount.");

    }

    componentWillUpdate() {
        console.log("WaitingLeaf will Update");
    }

    componentWillMount(){
        console.log("WaitingLeaf Will Mount");
    }

    componentDidUpdate(){
        console.log("WaitingLeaf Did Update");
    };

    render() {
        const params = this.props.navigation.state.params;
        // const {goBack} = this.props.navigation;
        return (
            <View style={WaitingStyles.container}>
                <Text style={WaitingStyles.textPromptStyle}
                >
                    注册使用手机号:{params.phoneNumber}
                </Text>

                <Text style={WaitingStyles.textPromptStyle}>
                    注册使用的密码:{params.userPw}
                </Text>

                <Text style={WaitingStyles.bigTextPrompt}
                      onPress={() => this.goBack()}
                >
                    返回
                </Text>
            </View>
        )
    }
}

ConfirmDialog.js

import React, { Component } from 'react';
import {
    Text,
    View,
    StyleSheet
} from 'react-native';
import ConfirmDialogStyles from '../../res/styles/ConfirmDialogStyles';

export default class ConfirmDialog  extends  Component{
    render()
    {
       return(

           <View style={ConfirmDialogStyles.confirmCont}>
               <View style={ConfirmDialogStyles.dialogStyle}>
                   <Text style={ConfirmDialogStyles.textPrompt}>
                       {/*提示语*/}
                       {this.props.promptToUser}
                   </Text>

                   <Text style={ConfirmDialogStyles.yesButton}
                         numberOfLines={3} //控制3行,内容第一行显示回车，目的是让文本居中
                         onPress={this.props.userConfirmed}
                   >
                       {'\r\n'} 确 定
                   </Text>

                   <Text style={ConfirmDialogStyles.cancelButton}
                         numberOfLines={3}
                         onPress={this.props.userCanceled}
                   >
                       {'\r\n'}取 消
                   </Text>
               </View>
           </View>
       );
    }
}

module.exports = ConfirmDialog;

二、样式文件

registerStyles

import React from 'react';
import {
    StyleSheet
} from 'react-native';

import {leftStartPoint,componentWidth} from "../values/ETTConfig";

var registerStyles = StyleSheet.create(
    {
        numberInputStyle: {
            top: 20,
            left: leftStartPoint,
            width: componentWidth,
            backgroundColor: 'gray',
            fontSize: 20
        },

        textPromptStyle: {
            top: 30,
            left: leftStartPoint,
            width: componentWidth,
            fontSize: 20
        },

        bigTextPrompt: {
            top: 70,
            left: leftStartPoint,
            width: componentWidth,
            backgroundColor: 'gray',
            color: 'white',
            textAlign: 'center',
            fontSize: 60
        },

        passwordInputStyle: {
            top: 50,
            left: leftStartPoint,
            width: componentWidth,
            backgroundColor: 'gray',
            fontSize: 20
        },

        container: {
            flex: 1,
            backgroundColor: 'white'
        },
    });

module.exports = registerStyles;

WaitingStyles

import React from 'react';
import {
    StyleSheet
} from 'react-native';

import {leftStartPoint,componentWidth} from "../values/ETTConfig";

var WaitingStyles = StyleSheet.create(
    {
        container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#F5FCFF'
        },

        textPromptStyle: {
            fontSize: 20,
        },
        bigTextPrompt: {
            width: 300,
            backgroundColor: 'gray',
            color: 'white',
            textAlign: 'center',
            fontSize: 20
        },
    });

module.exports = WaitingStyles;

ConfirmDialogStyles

import React from 'react';
import {
    StyleSheet
} from 'react-native';

import {leftStartPoint,componentWidth,ScreenHeight,ScreenWidth} from "../values/ETTConfig";

var ConfirmDialogStyles = StyleSheet.create(
    {
        confirmCont: {
            position: 'absolute',
            top: 0,
            width: ScreenWidth,
            height: ScreenHeight,
            backgroundColor: 'rgba(52,52,52,0.5)',
        },

        dialogStyle: {
            position: 'absolute',
            top: ScreenHeight * 0.2,
            left: ScreenWidth / 10,
            width: ScreenWidth * 0.8,
            height: ScreenWidth * 0.5,
            backgroundColor: 'white'
        },

        textPrompt: {
            position: 'absolute',
            top: 10,
            left: 10,
            fontSize: 20,
            color: 'black',
        },

        yesButton: {
            position: 'absolute',
            bottom: 10,
            left: 10,
            width: ScreenWidth * 0.35,
            height: ScreenHeight * 0.13,
            backgroundColor: 'grey',
            fontSize: 20,
            color: 'white',
            textAlign: 'center'
        },

        cancelButton: {
            position: 'absolute',
            bottom: 10,
            right: 10,
            width: ScreenWidth * 0.35,
            height: ScreenHeight * 0.13,
            backgroundColor: 'grey',
            fontSize: 20,
            color: 'white',
            textAlign: 'center',
        }
    });

module.exports = ConfirmDialogStyles;

三、配置文件

ETTConfig.js

import {
    Dimensions
} from 'react-native';


export let ScreenWidth = Dimensions.get('window').width;

export let ScreenHeight = Dimensions.get('window').height;

export let leftStartPoint = ScreenWidth * 0.1;

export let componentWidth = ScreenHeight * 0.8;

四、目录结构