在React Native中重点输入Modal的负载

Question

我使用的是React Native＆＃39; Modal组件。我想专注于TextInput＆amp;当模态可见时显示键盘。

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

Answer 1

您可以添加对文本输入的引用，并从模态的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>
    );
  }
}