1
我有一個Modal中的4個TextInputs，第一個TextInput沒有任何問題得到焦點，但其餘的都沒有得到焦點。單擊它時要更加準確，似乎它們一旦得到它就會獲得焦點並鬆開。TextInput無法集中在模態 - 反應原生Android
<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進一步說明我面對
