react-native-prompt

来源：互联网发布：什么cms建站好用编辑：程序博客网时间：2024/06/05 14:33
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View,  Image} from 'react-native';// var arr = [//     {//         title:'1',//         img:require("./img/未标题-1.png")//     },//     {//         title:'2',//         img:require("./img/未标题-2.png")//     }// ];// import arr from './json';import json from './json';import Prompt from 'react-native-prompt';export default class D20170511 extends Component {    constructor(props){        super(props);        this.state = {           isShow:false,           message:'',        }    }  render() {    return (      <View style={styles.container}>          <Text onPress={() => {                  this.setState({                      isShow:true                  });              }}>{'点击输入'}</Text>          <Text>{this.state.message}</Text>          <Prompt              visible={this.state.isShow}              title={'输入框的标题'}              placeholder={'请输入你的手机号码'}              defaultValue={this.state.message}              onCancel ={                  () => {                    //   alert('onCancel ');                      this.setState({                          isShow:false                      });                  }              }              onSubmit={                  (new_value) => {                    //   alert(new_value);                    //   alert('onSubmit');                      this.setState({                          isShow:false,                          message:new_value                      });                  }              }              cancelText={'取消'}              submitText={'提交'}              onChangeText={(data) => {                  if(data.length > 11){                    //   alert('手机号码必须为11位');                     data =  data.substring(0,11);                     this.setState({                         isShow:false,                         message:data                     });                }else{                    this.setState({                        message:data                    });                }              }}              />      </View>    );  }}const styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',    alignItems: 'center',    backgroundColor: '#F5FCFF',  },  welcome: {    fontSize: 20,    textAlign: 'center',    margin: 10,  },  instructions: {    textAlign: 'center',    color: '#333333',    marginBottom: 5,  },});AppRegistry.registerComponent('D20170511', () => D20170511);
0 0