React Native의 Modal로드시 포커스 입력

Question

React Native의 Modal 구성 요소를 사용하고 있습니다. Modal이 보이면 TextInput & 키보드를 보여주고 싶습니다.

아이디어가 있습니까?

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