何らかの理由で、画面の中央に架空のブロックがあり、その部分がこの架空のボックス内にある場合、TextInput または TouchableOpacity/TouchableHighlights (つまり、アイコン、テキスト、パディング、および色を含むボタン) の一部をクリックすることはできません。それは最も奇妙なバグです。それをデバッグしようとして、ScrollView を追加しました。これらの TouchableHighlights をこの架空のボックスの邪魔にならないようにスクロールすると、それらをクリックできます。ボックス内でそれらをスクロールして戻すと、クリックしません。半分入っている場合は、ボタンの半分がクリックされます。あなたはアイデアを得る。
これらのボタンには、プロジェクトの他の部分と同じ CSS とコンポーネント階層を使用しましたが、この架空のボックスの外でも問題なく動作します。本当にビックリです。
これが私のプロジェクトのサンプルコードです。
<>
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' , backgroundColor: '#cc0000'}}>
<Image source={require('../../images/logo.png')} style={{}}/>
<Text style={{ color: 'white', fontSize:20, fontWeight: "bold", paddingBottom:60}}>iPhone Wallet</Text>
<TextInput
autoCapitalize="none"
onChangeText = {text => this.setUserName(text)}
style={{height: 60, fontSize: 20, borderColor: '#c0cbd3', color: 'black', backgroundColor: 'white', borderRadius: 5, width: 300, margin: 10, padding: 10}}
placeholder = "Student Email"
placeholderTextColor="#000"
/>
<TextInput
autoCapitalize="none"
onChangeText = {text => this.setPassword(text)}
style={{height: 60, fontSize: 20, borderColor: '#c0cbd3', color: 'black', backgroundColor: 'white', borderRadius: 5, width: 300, margin: 10, padding: 10}}
placeholder = "Password"
placeholderTextColor="#000"
secureTextEntry={true}
/>
<TouchableHighlight
onPress = {() => this.loginUser()}
style={{height: 60, borderRadius: 5, width: 300, margin: 10, padding:10, backgroundColor: '#1985ff', alignItems: 'center', justifyContent: 'center', underlayColor:'blue'}} >
<View style={{alignItems: 'center', justifyContent: 'center',width: '100%',flexDirection:'row', flexWrap:'wrap'}}>
<Ionicons name={'log-in-outline'} size={23} color={'white'} />
<Text style={{color: 'white',fontSize: 20, marginLeft:10}}>Login</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
onPress = {() => this.resetPasswordAlert()}
style={{ marginTop:'5%', padding:10, alignItems: 'center', justifyContent: 'center'}} >
<Text style={{color: 'white',fontSize: 17}}>Forgot Password?</Text>
</TouchableHighlight>
<TouchableHighlight
onPress = {() => this.props.navigation.navigate('Signup')}
style={{ marginTop:'5%', padding:10, alignItems: 'center', justifyContent: 'center'}} >
<Text style={{color: 'white',fontSize: 17}}>Create Account</Text>
</TouchableHighlight>
</View>
</TouchableWithoutFeedback>
<View style={{ position: 'absolute', marginTop:'85%',marginLeft:'35%'}}>
<ActivityIndicator animating = {this.state.loadingIndicator} color="#000000" size="large" />
</View>
</>
iPhone 12エミュレーターと実際のiPhone XRの両方でテストしてきましたが、どちらも同じ効果がありました。これは、私が追加した架空のボックスを含む上記のコードの画像です。ログイン ボタンのかなりの部分がクリックできません (ピンク色)。
この架空のボックスは、スタックナビゲーターまたはタブナビゲーターの両方を使用して画面/コンポーネント間を移動している複数の異なる画面で発生しています。仮想ボックスがすべてのコンポーネントで同じサイズかどうかを判断するのは困難です。どんな助けでも大歓迎です！ありがとう。