![](/img/trans.png)
[英]React-Native TextInput with focus but without keyboard showing
[英]Keyboard Focus() not working in react native
在这里,我正在尝试做非常基本的事情。 首先,我专注于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)
}
}
}
您可以尝试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>
);
}
}
不用自己运行代码,我的猜测是您需要移动this.ref.focus();
进入setState
的回调。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.