react-native - 将输入重点放在 React Native 中的 Modal 负载上

Question

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

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

Answer 1

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