Question

我在一个模态中有4个TextInput，第一个TextInput没有任何问题得到焦点，但其余的没有得到焦点。为了更加准确，当你点击它时，似乎他们得到了焦点，并在它们得到它时松散。

 <Modal
   animationType={"fade"}
   transparent={false}
   visible={modalVisible}
   onRequestClose={() => {alert("Modal has been closed.")}}
   >
  <View style={{paddingTop: 22, height: Dimensions.get('window').height , backgroundColor: 'rgba(252,84,102,0.9)'}}>
   <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
     <View style={{flex: 1, justifyContent: 'flex-start', alignItems: 'center'}}>
       <View style={{flex: 0.2, flexDirection: 'row', alignItems: 'flex-start', justifyContent: 'flex-start'}}>
         <TouchableHighlight underlayColor={'rgba(0,0,0,0)'} style={{flex: 0.2, left: 20, alignItems: 'flex-start', justifyContent: 'flex-start'}} onPress={() => {
           setModalVisible(!modalVisible)
         }}>
           <Text style={{textAlign: 'center', color: 'white', fontSize: 35}}>X</Text>
         </TouchableHighlight>
         <View style={{flex: 0.8}}></View>
       </View>
       <View style={{flex: 0.6, width: Dimensions.get('window').width, alignItems: 'center', justifyContent: 'center', bottom: 100}}>
         <View style={{height: 180, width: 280, backgroundColor: '#5CA4F9', elevation: 5, borderRadius: 5}}>
           <View style={{flex: 0.25}}>
             <Text style={{marginVertical: 5, marginHorizontal: 10, color: 'white', fontFamily: helpers.getFont(), fontSize: 18}}>
               Credit Card
             </Text>
           </View>
           <View style={{flex: 0.25, justifyContent: 'center', alignItems: 'center', marginVertical: 5}}>
             <TextInput style={{flex: 1, width: 260, backgroundColor: 'white', borderRadius: 5}} placeholder="Card Name Holder"/>
           </View>
           <View style={{flex: 0.25, justifyContent: 'center', alignItems: 'center', marginVertical: 5}}>
             <TextInput style={{flex: 1, width: 260, backgroundColor: 'white', borderRadius: 5}} placeholder="Card Number"/>
           </View>
           <View style={{flex: 0.25, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginVertical: 10}}>
             <View style={{flex: 0.5, justifyContent: 'center', alignItems: 'center', marginHorizontal: 5}}>
               <TextInput style={{flex:1, width: 120, backgroundColor: 'white', borderRadius: 5}} placeholder="Expires (12/20)"/>
             </View>
             <View style={{flex: 0.5, justifyContent: 'center', alignItems: 'center', marginHorizontal: 5}}>
               <TextInput style={{flex:1, width: 120, backgroundColor: 'white', borderRadius: 5}} placeholder="CSV Number"/>
             </View>
           </View>
         </View>
         <View style={{height: Dimensions.get('window').height * 0.35, width: Dimensions.get('window').width * 0.9, backgroundColor: 'white', bottom: 100,  borderRadius: 5, justifyContent: 'center', alignItems: 'center'}}>
           <View style={{flex: 0.5}}>
           </View>
           <Text style={{flex: 0.1, fontFamily: helpers.getFont(), fontSize: 16, fontWeight: '500'}}>
             Enter your card information above.
           </Text>
           <View style={{flex: 0.1}}></View>
           <TouchableHighlight style={{flex: 0.2, height: 10, width: Dimensions.get('window').width * 0.70, backgroundColor: 'rgba(84,191,175,1)', justifyContent: 'center', alignItems: 'center', borderRadius: 3}}>
             <Text style={{fontFamily: helpers.getFont(), color: 'white', fontSize: 18, justifyContent: 'center', alignItems: 'center'}}>
               Add Card
             </Text>
           </TouchableHighlight>
           <View style={{flex: 0.1}}></View>
         </View>
       </View>
     </View>
   </View>
  </View>
 </Modal>

我还附加了一个gif来进一步说明我面临的问题

Answer 1

我终于找到了这个问题的解决方案，我面临的问题背后的原因是因为两个视图是重叠的兄弟视图，并且它们相互干扰。我必须做的就是交换两个兄弟姐妹的位置。这是我的解决方案：

   <View style={{height: Dimensions.get('window').height * 0.35, width: Dimensions.get('window').width * 0.9, backgroundColor: 'white', top: 100,  borderRadius: 5, justifyContent: 'center', alignItems: 'center'}}>
         <View style={{flex: 0.5}}>
         </View>
         <Text style={{flex: 0.1, fontFamily: helpers.getFont(), fontSize: 16, fontWeight: '500'}}>
           Enter your card information above.
         </Text>
         <View style={{flex: 0.1}}></View>
         <TouchableHighlight style={{flex: 0.2, height: 10, width: Dimensions.get('window').width * 0.70, backgroundColor: 'rgba(84,191,175,1)', justifyContent: 'center', alignItems: 'center', borderRadius: 3}}>
           <Text style={{fontFamily: helpers.getFont(), color: 'white', fontSize: 18, justifyContent: 'center', alignItems: 'center'}}>
             Add Card
           </Text>
         </TouchableHighlight>
         <View style={{flex: 0.1}}></View>
       </View>
       <View style={{flex: 0.6, width: Dimensions.get('window').width, alignItems: 'center', justifyContent: 'center', bottom: 260}}>
         <View style={{height: 180, width: 280, backgroundColor: '#5CA4F9', elevation: 5, borderRadius: 5}}>
           <View style={{flex: 0.25}}>
             <Text style={{marginVertical: 5, marginHorizontal: 10, color: 'white', fontFamily: helpers.getFont(), fontSize: 18}}>
               Credit Card
             </Text>
           </View>
           <View style={{flex: 0.25, justifyContent: 'center', alignItems: 'center', marginVertical: 5}}>
             <TextInput style={{flex: 1, width: 260, backgroundColor: 'white', borderRadius: 5}} placeholder="Card Name Holder"/>
           </View>
           <View style={{flex: 0.25, justifyContent: 'center', alignItems: 'center', marginVertical: 5}}>
             <TextInput style={{flex: 1, width: 260, backgroundColor: 'white', borderRadius: 5}} placeholder="Card Number"/>
           </View>
           <View style={{flex: 0.25, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginVertical: 10}}>
             <View style={{flex: 0.5, justifyContent: 'center', alignItems: 'center', marginHorizontal: 5}}>
               <TextInput style={{flex:1, width: 120, backgroundColor: 'white', borderRadius: 5}} placeholder="Expires (12/20)"/>
             </View>
             <View style={{flex: 0.5, justifyContent: 'center', alignItems: 'center', marginHorizontal: 5}}>
               <TextInput style={{flex:1, width: 120, backgroundColor: 'white', borderRadius: 5}} placeholder="CSV Number"/>
             </View>
           </View>
         </View>

Answer 2

import Modal from 'react-native-modal';

avoidKeyboard={true} 使用此键盘自动聚焦文本字段

<Modal
    visible={isVisible}
    onRequestClose={onCheckedInActionClick}
    avoidKeyboard={true}>

  <View> </View>

TextInput无法在模态中获得焦点 - React Native Android

2 个答案: