将输入集中在React Native中的Modal负载上

Question

我正在使用React Native的Modal组件。当模态可见时，我想专注于TextInput和显示键盘。

任何想法如何做到这一点？

Answer 1

autoFocus将TextInput 上的属性设置为 true：

<TextInput
  autoFocus={true}
/>

Answer 2

您可以添加对文本输入的引用，并从Modal的onShow处理程序中调用focus方法。

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>
    );
  }
}