将输入重点放在反应天然中模态的负载上

Question

我正在使用React Native的模态组件。我想专注于textinput＆amp;显示模式时显示键盘。

有什么想法如何做？

Answer 1

您可以向文本输入添加引用，并从模态的OnShow处理程序中调用焦点方法。

    import React, { Component } from 'react';
    import { Modal, Text, TextInput, TouchableHighlight, View } from 'react-native';
    
    export default class ModalExample extends Component {
    
      state = {
        modalVisible: false,
      }
    
      render() {
        return (
          <View style={{flex: 1, justifyContent:'center', alignSelf: 'center'}}>
            <Modal
              animationType={"slide"}
              transparent={false}
              visible={this.state.modalVisible}
              onShow={() => { this.textInput.focus(); }}
              >
             <View style={{backgroundColor: 'green', marginTop: 50, width: 300, padding: 50, alignSelf: 'center'}}>
              <View>
                <Text>Hello World!</Text>
                <TextInput
                  ref={(input) => { this.textInput = input; }}
                  style={{ padding: 20, backgroundColor: 'white', color: 'red' }}
                />
              </View>
             </View>
            </Modal>
    
            <TouchableHighlight onPress={() => {
              this.setState({modalVisible: true});
            }}>
              <Text>Show Modal</Text>
            </TouchableHighlight>
    
          </View>
        );
      }
    }

Answer 2

将文本输入上的属性autoFocus设置为true：

<TextInput
  autoFocus={true}
/>