键盘焦点（）在本机反应中不起作用

Posted 2023-04-18

【中文标题】键盘焦点（）在本机反应中不起作用

【英文标题】：Keyboard Focus() not working in react native

【发布时间】：2019-12-18 21:25:24

【问题描述】：

在这里，我正在尝试做非常基本的事情。首先，我专注于 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)
          
            
  

【参考方案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>
    );
  

【讨论】：

@sd_dewasurendra 你想成为第一个运行函数的人吗？

我没明白

@sd_dewasurendra 这个函数运行正常吗？

是的，它运行良好。唯一的问题是焦点方法在 android 平台上不起作用。功能在 android 和 iOS 平台上都可以正常工作

你能试试这个吗？ this.UploadSelectedImageForGT(this.textInput) ... UploadSelectedImageForGT(text) text.current.focus();

【参考方案2】：

如果不自己运行您的代码，我的猜测是您需要将您的 this.ref.focus(); 移动到您的 setState 的回调中。