Question

在这里，我正在尝试做非常基本的事情。首先，我专注于 TextInput ，而我专注于使用 imagepicker 拍照。拿回去后，我的键盘藏起来了。保存图像后，我使用了focus（）方法。在iOS中，它越来越受到关注。但是在android中它不起作用。我需要再次触摸textinput才能将其打开。是 android 平台中的问题，还是如果我输入错误，请告诉我。示例代码如下。谢谢。

renderView(){
  return(
    <View>
    <TouchableOpacity style={{marginLeft:28}} onPress={()=>{this.selectPhotoTapped()}}></TouchableOpacity>
    <TextInput
      style={{ maxHeight: Math.min(this.state.height+20,250),
                        height: Math.min(this.state.height+20,250)}}
      placeholderTextColor="#aaaaaa"
      autoGrow={true}
      autoFocus={false}
      multiline= {true}
      ref={ref => (this.ref = ref)}
      onChangeText={( postText) => this.setState({ postText})}
    />
    <View>                               
  )
}

selectPhotoTapped() {

    const options = {
      quality: 1.0,
      maxWidth: 500,
      maxHeight: 500,
      storageOptions: {
      skipBackup: true
      }       
    };

    ImagePicker.showImagePicker(options, (response) => { 
      console.log('Response = ', response);

      if (response.didCancel) {

        console.log('User cancelled photo picker');
      }
      else if (response.error) {

        console.log('ImagePicker Error: ', response.error);
      }
      else if (response.customButton) {

        console.log('User tapped custom button: ', response.customButton);
      }
      else {
        let mediaType = response.type

        this.setState({
          mediaAttached: true,
          attachedMediaType: 2,
          mediaPath:response.uri,
          uploadMediaType:mediaType,           
        });
        this.UploadSelectedImageForGT()

      }

    });   

}

UploadSelectedImageForGT(){
    this.setState({ visiblePostsomething:false, mediaUploading: true})
    this.ref.focus(); 
      const uuidv4 = require('uuid/v4');
      if(this.state.mediaPath!= ''){
        try{
          const storage = firebase.storage();
          this.setState({fireBaseMediaPath: 'Appsurvey/Image/user1/'+uuidv4()+'img.jpg'})
            const mRef = storage.ref('portal1').child(this.state.fireBaseMediaPath);
            mRef.putFile(this.state.mediaPath, { contentType: this.state.uploadMediaType })
            .on('state_changed', snapshot => {
                                  }, err => {
                                  }, uploadedFile => {
                                    console.log('uploadedFile.downloadURL: ', uploadedFile.downloadURL);                                
                                    this.setState({PostMediaURL: uploadedFile.downloadURL, uploadSuccess: true, mediaUploading: false}) 
                                });
          }catch(error){
              Alert.alert(error)
          }
      }      
  }

Answer 1

您可以尝试React.createRef()

  constructor(props) {
    super(props);
    this.textInput = React.createRef();
  }
...
    <TextInput
      style={{ maxHeight: Math.min(this.state.height+20,250),
                        height: Math.min(this.state.height+20,250)}}
      placeholderTextColor="#aaaaaa"
      autoGrow={true}
      autoFocus={false}
      multiline= {true}
      ref={this.textInput}
      onChangeText={( postText) => this.setState({ postText})}
    />
...
UploadSelectedImageForGT(){
...
this.textInput.current.focus();
...
}

示例

import * as React from 'react';
import { Text, View, StyleSheet,TextInput,Button } from 'react-native';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
    this.textInput2 = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {

    this.textInput.current.focus();
  }

  render() {
    return (
      <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
          <TextInput ref={this.textInput} style={{width:"80%", height:30,backgroundColor:"blue",color:"#ffffff"}}/>
          <TextInput ref={this.textInput2} style={{width:"80%", height:30,backgroundColor:"red",color:"#ffffff"}}/>
          <Button title="focus button" onPress={this.focusTextInput}/>
      </View>
    );
  }
}

Answer 2

我自己没有运行代码，我想您需要将this.ref.focus();移到setState的回调中。

Keyboard Focus（）在本机反应中不起作用

2 个答案: