0

出于某种原因，屏幕中间有一个虚构的块，如果该部分位于这个虚构的框内，则不允许我单击 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 上进行测试，两者的效果相同。这是上面代码的图像，带有我添加的假想框。很大一部分登录按钮是不可点击的（粉红色）。

在此处输入图像描述

这个假想的盒子发生在多个不同的屏幕上，这些屏幕同时使用堆栈导航器或选项卡导航器在屏幕/组件之间导航。很难判断假想的盒子是否对于所有组件都相同大小。任何帮助是极大的赞赏！谢谢。

4

0 回答 0