【发布时间】：2022-12-16 11:57:33
【问题描述】：
我创建了一个应用程序，如果我在其中使用 TouchableOpacity 执行任何操作或导航，但问题是我需要多次单击按钮，导航到下一个位置也需要时间。我正在编写一段简单的代码，但不知道为什么会导致此问题。请帮忙。
导航到登录屏幕的代码
goToLogin = () => {
navigation.replace('SignIn');
};
界面代码
<KeyboardAvoidingView
style={{
display: 'flex',
height: Dimensions.get('window').height,
width: Dimensions.get('window').width,
}}
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<ScrollView
style={{
flex: 1,
backgroundColor: !darkTheme
? Colors.light.backgrounColor
: Colors.dark.backgrounColor,
}}>
<View
style={{flex: 0.15, alignItems: 'center', justifyContent: 'center', marginTop:height*0.1}}>
{!darkTheme ? (
<Image
source={require('../assets/images/logo.png')}
resizeMode="contain"
/>
) : (
<Image
source={require('../assets/images/logo-white.png')}
resizeMode="contain"
/>
)}
</View>
<View style={{alignItems:'center', justifyContent:'center', flex: 0.875,}}>
<View
style={{
alignSelf: 'center',
marginTop:height*0.02
}}>
<View
style={{
width: width * 0.9,
borderRadius: 20,
marginHorizontal: width * 0.015,
marginBottom: height * 0.05,
padding: width * 0.03,
shadowColor: '#49494966',
shadowOffset: {
width: -9,
height: -9,
},
shadowRadius: 16,
shadowOpacity: 0.5,
}}>
<View>
<Text
style={{
color: !darkTheme
? Colors.light.textColor
: Colors.dark.textColor,
fontFamily: 'FiraSans-Medium',
fontSize: 20,
}}>
Sign Up
</Text>
{/* Your Name */}
<View
style={{
flexDirection: 'row',
marginTop: height * 0.04,
width: width,
alignItems: 'center',
}}>
{!darkTheme ? (
<Image
source={require('../assets/images/name.png')}
resizeMode="contain"
/>
) : (
<Image
source={require('../assets/images/name-white.png')}
resizeMode="contain"
/>
)}
<TextInput
style={{
fontSize: 16,
fontFamily: 'OpenSans-Regular',
paddingHorizontal: width * 0.01,
color: !darkTheme ? Colors.light.black : Colors.light.white,
borderColor: !darkTheme
? Colors.light.textInputLine
: Colors.light.white,
borderBottomWidth: 1,
width: width * 0.75,
}}
value={yourName}
onChangeText={value => {
setYourName(value);
}}
clearButtonMode="always"
placeholder="Your Name"
placeholderTextColor={
!darkTheme
? Colors.light.placeholderColor
: Colors.light.white65
}
autoCapitalize="none"
/>
</View>
{/* Date of Birth */}
<TouchableOpacity onPress={showDatepicker}>
<View
style={{
flexDirection: 'row',
marginTop: height * 0.04,
width: width,
alignItems: 'center',
}}>
{!darkTheme ? (
<Image
source={require('../assets/images/dob.png')}
resizeMode="contain"
/>
) : (
<Image
source={require('../assets/images/dob-white.png')}
resizeMode="contain"
/>
)}
<View
style={{
borderColor: Colors.light.textInputLine,
borderBottomWidth: 1,
}}>
<Text
style={{
fontSize: 16,
fontFamily: 'OpenSans-Regular',
paddingHorizontal: width * 0.01,
color: dateSelected
? Colors.light.textColor
: Colors.light.placeholderColor,
width: width * 0.75,
}}>
{dateSelected ? dob : ' Date of Birth'}
</Text>
</View>
</View>
</TouchableOpacity>
{show && (
<DatePicker
modal
open={show}
date={startDate}
mode="date"
textColor={Colors.light.text}
display="inline"
onConfirm={date => {
setShow(false);
setDate(date);
setDateSelected(true);
setDOB(moment(date).format('MM-DD-YYYY'));
}}
onCancel={() => {
setShow(startDate);
}}
/>
)}
{/* parent name */}
<View
style={{
flexDirection: 'row',
marginTop: height * 0.04,
width: width,
alignItems: 'center',
}}>
{!darkTheme ? (
<Image
source={require('../assets/images/parent-name.png')}
resizeMode="contain"
/>
) : (
<Image
source={require('../assets/images/parent-name-white.png')}
resizeMode="contain"
/>
)}
<TextInput
style={{
fontSize: 16,
fontFamily: 'OpenSans-Regular',
paddingHorizontal: width * 0.01,
color: !darkTheme ? Colors.light.black : Colors.light.white,
borderColor: !darkTheme
? Colors.light.textInputLine
: Colors.light.white,
borderBottomWidth: 1,
width: width * 0.75,
}}
value={parentName}
onChangeText={value => {
setParentName(value);
}}
clearButtonMode="always"
secureTextEntry={false}
placeholder="Parent Name"
placeholderTextColor={
!darkTheme
? Colors.light.placeholderColor
: Colors.light.white
}
autoCapitalize="none"
/>
</View>
{/* Email */}
<View
style={{
flexDirection: 'row',
marginTop: height * 0.04,
width: width,
alignItems: 'center',
}}>
{!darkTheme ? (
<Image
source={require('../assets/images/email.png')}
resizeMode="contain"
/>
) : (
<Image
source={require('../assets/images/email-white.png')}
resizeMode="contain"
/>
)}
<TextInput
style={{
fontSize: 16,
fontFamily: 'OpenSans-Regular',
paddingHorizontal: width * 0.01,
color: !darkTheme ? Colors.light.black : Colors.light.white,
borderColor: !darkTheme
? Colors.light.textInputLine
: Colors.light.white,
borderBottomWidth: 1,
width: width * 0.75,
}}
value={email}
onChangeText={value => {
setEmail(value);
}}
onSubmitEditing={() => onEmailSubmit()}
clearButtonMode="always"
placeholder="Email"
placeholderTextColor={
!darkTheme
? Colors.light.placeholderColor
: Colors.light.white
}
autoCapitalize="none"
/>
</View>
{/* UserName */}
<View
style={{
flexDirection: 'row',
marginTop: height * 0.04,
width: width,
alignItems: 'center',
}}>
{!darkTheme ? (
<Image
source={require('../assets/images/username.png')}
resizeMode="contain"
/>
) : (
<Image
source={require('../assets/images/username-white.png')}
resizeMode="contain"
/>
)}
<TextInput
style={{
fontSize: 16,
fontFamily: 'OpenSans-Regular',
paddingHorizontal: width * 0.01,
color: !darkTheme ? Colors.light.black : Colors.light.white,
borderColor: !darkTheme
? Colors.light.textInputLine
: Colors.light.white,
borderBottomWidth: 1,
width: width * 0.75,
}}
value={userName}
onChangeText={value => {
setUserName(value.toLowerCase());
}}
clearButtonMode="always"
secureTextEntry={false}
placeholder="Username"
placeholderTextColor={
!darkTheme
? Colors.light.placeholderColor
: Colors.light.white
}
autoCapitalize="none"
/>
</View>
{/* Password */}
<View
style={{
flexDirection: 'row',
marginTop: height * 0.04,
width: width,
alignItems: 'center',
}}>
{!darkTheme ? (
<Image
source={require('../assets/images/password.png')}
resizeMode="contain"
/>
) : (
<Image
source={require('../assets/images/password-white.png')}
resizeMode="contain"
/>
)}
<TextInput
style={{
fontSize: 16,
fontFamily: 'OpenSans-Regular',
paddingHorizontal: width * 0.01,
color: !darkTheme ? Colors.light.black : Colors.light.white,
borderColor: !darkTheme
? Colors.light.textInputLine
: Colors.light.white,
borderBottomWidth: 1,
width: width * 0.7,
}}
value={password}
onChangeText={value => {
setPassword(value);
}}
onSubmitEditing={() => checkPassword(password)}
secureTextEntry={securePwd}
placeholder="Password"
placeholderTextColor={
!darkTheme
? Colors.light.placeholderColor
: Colors.light.white
}
autoCapitalize="none"
/>
<TouchableOpacity onPress={() => setSecurePwd(!securePwd)}>
{securePwd ? (
!darkTheme ? (
<Image
source={require('../assets/images/eye-close.png')}
resizeMode="contain"
style={{width: 30, height: 20}}
/>
) : (
<Image
source={require('../assets/images/eye-close-white.png')}
resizeMode="contain"
style={{width: 30, height: 20}}
/>
)
) : !darkTheme ? (
<Image
source={require('../assets/images/eye-open.png')}
resizeMode="contain"
style={{width: 30, height: 20}}
/>
) : (
<Image
source={require('../assets/images/eye-open-white.png')}
resizeMode="contain"
style={{width: 30, height: 20}}
/>
)}
</TouchableOpacity>
</View>
<View
style={{
flexDirection: 'row',
alignItems: 'center',
marginTop: height * 0.01,
}}>
<Text
style={{
color: !darkTheme
? Colors.light.placeholderColor
: Colors.light.white65,
fontFamily: 'OpenSans-Regular',
fontSize: 16,
marginRight: width * 0.03,
marginLeft: width * 0.01,
textAlign: 'justify',
}}>
{strings.tNc}
<Text
style={{
color: Colors.light.blueColor,
fontFamily: 'OpenSans-Regular',
fontSize: 16,
}}>
{strings.terms}
</Text>
<Text
style={{
color: !darkTheme
? Colors.light.placeholderColor
: Colors.light.white65,
fontFamily: 'OpenSans-Regular',
fontSize: 16,
}}>
{strings.and}
</Text>
<Text
style={{
color: Colors.light.blueColor,
fontFamily: 'OpenSans-Regular',
fontSize: 16,
}}>
{strings.privacyPolicy}
</Text>
</Text>
</View>
{/* sign Up button */}
<View
style={{
width: width * 0.3,
height: height * 0.05,
alignItems: 'center',
justifyContent: 'center',
alignSelf: 'center',
borderRadius: 25,
marginTop: height * 0.04,
backgroundColor: Colors.light.buttonBackground,
marginBottom: height * 0.04,
}}>
<TouchableOpacity
onPress={() => {
validateSignUp();
}}>
<View>
{!loader ? (
<Text
style={{
color: Colors.dark.textColor,
fontFamily: 'FiraSans-Regular',
fontSize: 17,
}}>
{strings.signUp}
</Text>
) : (
<ActivityIndicator color={Colors.light.white} />
)}
</View>
</TouchableOpacity>
</View>
</View>
</View>
</View>
<View
style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
flex: 0.07,
}}>
<Text
style={{
fontFamily: 'OpenSans-Regular',
fontSize: 16,
color: !darkTheme
? Colors.light.placeholderColor
: Colors.light.white65,
marginRight: width * 0.01,
}}>
{strings.alreadyUser}
</Text>
<TouchableOpacity onPress={goToLogin}>
<Text
style={{
fontFamily: 'OpenSans-Regular',
fontSize: 16,
color: Colors.light.blueColor,
}}>
{strings.login}
</Text>
</TouchableOpacity>
</View>
</View>
</ScrollView>
</KeyboardAvoidingView>
登录按钮代码
<TouchableOpacity onPress={goToLogin}>
<Text
style={{
fontFamily: 'OpenSans-Regular',
fontSize: 16,
color: Colors.light.blueColor,
}}>
{strings.login}
</Text>
</TouchableOpacity>
当我受够了这个问题时，有人能帮我解决这个问题吗？
提前致谢
【问题讨论】：
-
您是从 RN 还是 react-native-gesture-handler 导入 TouchableOpacity？您可以尝试另一种选择。
-
我也面临着你的问题。导航到其他页面需要时间。这与目标页面中的渲染工作量有关。换句话说，如果您的“登录”页面包含大量组件，则渲染（当 TouchableOpacity 显示 activeOpacity 时）然后导航需要时间。
-
@PeterTam 感谢您的反馈。你能帮我解决这个问题吗？
-
您可能需要找出影响渲染性能的组件，尝试注释其中的一些组件并重试导航，直到延迟最小化。由于导致这个问题的原因有很多，我无法确定它一定能解决问题。
-
@PeterTam 好的，非常感谢。我会检查一下。
标签： reactjs react-native react-hooks touch touchableopacity