rn-project/src/pages/input.js

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

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

import { SafeAreaView } from 'react-navigation';
import BaseStyle from '../constants/Style';
import Input from '../components/input';

export default class InputScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      phone: '',
      isOpenClear: false,
    };
  }

  render() {
    const {navigation:{navigate}} =this.props;
    return (
      <SafeAreaView
        style={[BaseStyle.flex, styles.homebg]}
        forceInset={{ top: 'never' }}>
        <ScrollView
          ref={c => {
            this.scrollView = c;
          }}
          keyboardShouldPersistTaps={'handled'}>
          <Text onPress={()=>{
             navigate('Web', { uri: 'https://reactnative.cn/docs/0.47/textinput/',title:"TextInput" });
          }} style={styles.text}>兼容<Text style={styles.blueColor} > RN</Text> 官方属性 具体用法可参考此DEMO</Text>
          <Text style={styles.text}>
            {'您输入的手机号：' + this.state.phone}
          </Text>
          <View style={styles.container}>
            <Input
              LeftIcon={'\ue605'}
              LeftText={'手机号'}
              placeholder={'请输入手机号码'}
              isOpenClear={this.state.isOpenClear}
              defaultValue={this.state.phone}
              keyboardType="numeric"
              maxLength={11}
              onChangeText={text =>
                this.setState({ phone: text }, () => {
                  this.state.phone.length > 0
                    ? this.setState({ isOpenClear: true })
                    : this.setState({ isOpenClear: false });
                })
              }
              clear={() => {
                this.setState({ phone: '', isOpenClear: false });
              }}
            />
            <Input LeftText={'身份证'} textAligin={'right'} maxLength={18} />

            <Input
              LeftText={'验证码'}
              textAligin={'left'}
              isMsgInput={true}
              keyboardType="numeric"
              msgCodeText={'获取验证码'}
              placeholder={'请输入收到的验证码'}
              maxLength={6}
              onPress={() => {}}
            />
            <Input
              LeftText={'验证码'}
              textAligin={'left'}
              isMsgInput={true}
              keyboardType="numeric"
              msgCodeText={'60s'}
              placeholder={'请输入收到的验证码'}
              maxLength={6}
              MsgDisable={true}
              onPress={() => {}}
            />

            <Text style={styles.text}>图形验证码支持base64图片格式</Text>
            <Text style={styles.text} />

            <Input
              LeftText={'验证码'}
              textAligin={'left'}
              isImageMsg={true}
              keyboardType="numeric"
              placeholder={'请输入图形验证码'}
              maxLength={6}
              ImageUri={`https://upload-images.jianshu.io/upload_images/4731495-b73e581098232f28.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240`}
              onPressImage={() => {}}
            />

            <Text style={[styles.text, { marginBottom: 300 }]} />
          </View>
        </ScrollView>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  homebg: {
    backgroundColor: '#fff',
  },
  container: {
    ...BaseStyle.flex,
    paddingTop: 20,
  },

  text: {
    marginTop: 30,
    paddingLeft: 15,
  },
  blueColor:{
    color:"#0894ec"
  },
});