在React Native中輸入Modal的負載

Question

我正在使用React Native的Modal組件。當Modal可見時，我想關注TextInput &顯示鍵盤。

任何想法如何做到這一點？

Answer 1

您可以添加對文本輸入的引用，並從Modal的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> 
    ); 
    } 
}