rn-project/src/pages/password.js

#### 项目介绍 类似一个脚手架的工具 此项目致力于构建一套基础，简单，可维护的 适配我司的react-native项目。可在此基础上搭建项目，封装了基础架构，基础组件，以及各种交互等；可快速进行项目搭建，开发。 # 涉及主要技术 - 1. 项目主要架构 * react native * react-navigation * redux

import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';

import { SafeAreaView } from 'react-navigation';

import BaseStyle from '../constants/Style';
import Pwd from '../components/password';

import Btn from '../components/buttons';
import Swt from '../components/switch';
export default class PwdScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalVisible: false,
      pwdV: '',
      value: false,
      value2: false,
    };
  }

  render() {
    return (
      <SafeAreaView
        style={[BaseStyle.flex, styles.homebg]}
        forceInset={{ top: 'never' }}>
        <Pwd
          modalVisible={this.state.modalVisible}
          closePwd={() => {
            this.setState({ modalVisible: false });
          }}
          checkPwd={this.state.value}
          isOpenVibration={this.state.value2}
          callBackPwd={v => {
            this.setState({ pwdV: v });
          }}
        />
        <View style={styles.container}>
          <Text style={styles.pwdtext}>
            您输入的交易密码为:
            <Text style={styles.redbg}>{this.state.pwdV}</Text>
          </Text>
          <View style={styles.rowView}>
            <Text style={styles.rowText}>是否开启密码校验：</Text>
            <Swt
              value={this.state.value}
              onValueChange={value => {
                this.setState({
                  value: value,
                  ChangeText: value ? '开关打开了' : '开关关闭了',
                });
              }}
            />
          </View>
          <View style={styles.rowView}>
            <Text style={styles.rowText}>是否开启震动效果：</Text>
            <Swt
              value={this.state.value2}
              onValueChange={value => {
                this.setState({
                  value2: value,
                });
                value ? toast('温馨提示:真机下感受效果~') : null;
              }}
            />
          </View>
          <Btn
            text={'去支付'}
            onPress={() => {
              this.setState({ modalVisible: true });
            }}
          />
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  homebg: {
    backgroundColor: '#eee',
  },
  container: {
    ...BaseStyle.flex,
    paddingTop: 20,
  },
  pwdtext: {
    fontSize: 15,
    color: '#333',
    marginBottom: 30,
    marginLeft: 15,
  },
  rowView: {
    marginBottom: 20,
    marginLeft: 15,
    ...BaseStyle.row,
    ...BaseStyle.alignItemsCenter,
  },
  rowText: {
    fontSize: 15,
    color: '#333',
  },
  redbg: {
    color: 'red',
  },
});