TextInput bekommt keinen Fokus innerhalb eines Modal - Reagieren Native Android

Question

Ich habe 4 TextInputs in einem Modal, der erste TextInput bekommen den Fokus ohne irgendein Problem, aber der Rest nicht Fokus bekommen. Um genauer zu sein, wenn Sie darauf klicken, scheint es, dass sie den Fokus bekommen und verlieren, sobald sie es bekommen.

<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> 

ich auch eine gif bin Befestigung weiter um das Problem zu veranschaulichen, ich

bin vor

Answer 1

Ich fand schließlich die Lösung dieses Problems, den Grund für das Problem, weil zwei Ansichten, die ich war mit Blick auf es ist waren überlappende Geschwister Ansichten waren und sie störten sich gegenseitig. Um dieses Problem zu lösen, musste ich die Plätze der beiden Geschwister tauschen. Hier ist meine Lösung:

<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>