0

ここでは、非常に基本的なことをしようとしています。最初にTextInputに焦点を当てながら、imagepickerを使用して写真を撮っていることに焦点を当てます。持って帰ってきたら キーボードが隠れる。画像を保存した後、 focus() メソッドを使用しました。iOS では、その焦点を当てています。しかし、アンドロイドではうまくいきません。テキスト入力を開くには、もう一度タッチする必要があります。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)
          }
      }      
  }
4

2 に答える 2

0

あなたが試すことができます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>
    );
  }
}
于 2019-08-12T14:05:06.423 に答える