react native 自定义 TextInput组件

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

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

export default class CKTextInput extends Component{
    constructor(){
        super();
        this.state={
            inputValue:''
        }
    }

    render(){
        return(
            <View>
                <TextInput
                style={{
                    width:300,
                    height:40,
                    borderColor:'gray',
                    borderWidth:1,
                    marginLeft:10,
                    paddingLeft:10
                }}
               // clearButtonMode="always"//ios支持
                keyboardType="number-pad"//数字键盘
                placeholder="请输入用户名"
                placeholderTextColor="red"
                multiline={true}
                onChangeText={(text)=>{this.setState({inputValue:text})}} //这里为了获取用户输入的信息
                />
                <Text>输入的内容：{this.state.inputValue}</Text>
            </View>
        )
    }
}

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 App;

3.结果如图