react native 自定义 TextInput组件

1.创建自定义CKTextInput.js 组件类

1 import React,{Component} from 'react';
 2 import { 
 3     View,
 4     TextInput,
 5     StyleSheet,
 6     Text
 7 } from 'react-native';
 8 
 9 export default class CKTextInput extends Component{
10     constructor(){
11         super();
12         this.state={
13             inputValue:''
14         }
15     }
16 
17     render(){
18         return(
19             <View>
20                 <TextInput
21                 style={{
22                     width:300,
23                     height:40,
24                     borderColor:'gray',
25                     borderWidth:1,
26                     marginLeft:10,
27                     paddingLeft:10
28                 }}
29                // clearButtonMode="always"//ios支持
30                 keyboardType="number-pad"//数字键盘
31                 placeholder="请输入用户名"
32                 placeholderTextColor="red"
33                 multiline={true}
34                 onChangeText={(text)=>{this.setState({inputValue:text})}} //这里为了获取用户输入的信息
35                 />
36                 <Text>输入的内容：{this.state.inputValue}</Text>
37             </View>
38         )
39     }
40

2.在App.js中引用

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

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

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

import CKTextInput from './components/CKTextInput';

const App: () => React$Node = () => {

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={styles.mainViewStyle}>

      <CKTextInput/>
      </SafeAreaView>
    </>
  );
};


const styles=StyleSheet.create({
  mainViewStyle:{
      flex:1,
      backgroundColor:'#fff',
  }
});



export default

3.结果如图