Question

我有一个注册组件，该组件具有来自外部库https://github.com/thegamenicorus/react-native-phone-input的PhoneInput组件。问题是我想在PhoneInput内的TextField聚焦后立即执行一些代码。

在检查库的文档时。我看到了一个名为textComponent的属性。可以用于PhoneInput组件中存在的文本字段的onFocus

import React from 'react';
import {Image, StyleSheet, Text, View} from 'react-native';
import PhoneInput from 'react-native-phone-input'

export default class Register extends React.Component {
    constructor(props){
        super(props);
        this.state = {"phone": ""};
        this.countriesList =  [
            {
                "name": "India (भारत)",
                "iso2": "in",
                "dialCode": "91",
                "priority": 0,
                "areaCodes": null
            }];
        this.phoneTextField=null;
    }
    componentDidMount() {
        console.log('GrandChild did mount.');
        // console.log(this.phoneTextField);
    }
    render() {
        console.log(this.phoneTextField);
        console.log("Register Screen");
        return (
            <View style={{borderColor:'red', borderWidth:0, height:'100%' }}>
                <View style={{borderColor:'green', borderWidth:0, height:'20%' }}>
                    <View style={{borderColor:'blue', borderWidth:0, resizeMode:'contain', width:'50%', height:'100%'}}>
                        <Image
                            style={{width: '100%', height: '100%' }}
                            source={ require("../assets/logo.png") }
                        />
                    </View>
                </View>
                <View style={{borderColor:'green', borderWidth:0, height:'40%', marginLeft:'1%', marginTop:'5%' }}>
                    <View style={{borderColor:'blue', borderWidth:0, resizeMode:'contain', width:'100%', height:'100%'}}>
                        <Image
                            style={{width: '100%', height: '100%' }}
                            source={ require("../assets/welcomescreen.jpg") }
                        />
                    </View>
                </View>
                <View style={{ margin : '7%'}}>
                    <Text style={{ fontSize:20, fontWeight:'bold' }}>Save your time</Text>
                    <Text style={{ fontSize:14, color:'grey', paddingTop:'5%' }}>Please Enter your mobile number to proceed</Text>
                    <PhoneInput ref={ref => {
                            this.phoneTextField = ref;
                    }}
                                style={{paddingTop:'10%'}}
                                countriesList={this.countriesList}
                                initialCountry='in'
                                onChangePhoneNumber={(phone)=>{
                                    console.log(phone);
                                }}
                    />
                </View>
            </View>


        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

我的App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Register from "./screens/Register";

export default class App extends React.Component {
  render() {
    console.log("hello bros");
    return (
      <Register/>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Answer 1

我对该库不熟悉，但是textComponent接受一个函数，因此您应该可以做到这一点

textComponent={
  ()=>{
  return(<TextInput 
  ....some props here 
  onFocus={()=>console.log('focused')})
  }}

重点关注外部库中的本机TextField组件

1 个答案: