通过条件渲染导航到屏幕（如果）

Question

这是入门屏幕，我想在显示或单击最后一个项目时将其导航到屏幕，而不是显示 console.log("last item") 它应该导航到屏幕

 import React,{useState,useRef} from 'react';
    import { View, Text,StyleSheet, FlatList, Animated } from 'react-native';
    
    import OnboardingItem from "./OnboardingItem";
    import slides from "./slides"
    import Paginator from './Paginator';
    import NextButton from './NextButton';
    import WelcomeScreen from "../../screens/WelcomeScreen"
    
    
    export default Onboarding  =  () => {
      const [currentIndex,setCurrentIndex] = useState(0);
    
      const scrollX = useRef(new Animated.Value(0)).current;
    
      const slidesRef = useRef(null);
    
      const viewableItemsChanged = useRef(({viewableItems}) =>{
        setCurrentIndex(viewableItems[0].index );
      }).current;
    
      const viewConfig = useRef({ viewAreaCoveragePercentThreshold:50 }).current;
    
      const scrollTo = () => {
        if(currentIndex < slides.length - 1){
          slidesRef.current.scrollToIndex({index: currentIndex + 1})
        }else{
           console.log("last item");
        }
      }
    
      return (
        <View style={styles.container}>
          <View style={{flex:3}}>
          <FlatList 
          data={slides} 
          renderItem={({item}) => <OnboardingItem item={item} /> } 
          horizontal
          showsHorizontalScrollIndicator={false}
          pagingEnabled
          bounces={false}
          keyExtractor={(item) => item.id }
          onScroll={Animated.event([{nativeEvent: {contentOffset:{x:scrollX} } }],{
            useNativeDriver:false,
          })}
          scrollEventThrottle={32}
          onViewableItemsChanged={viewableItemsChanged}
          viewabilityConfig={viewConfig}
          ref={slidesRef}
          />
          </View>
          <Paginator data={slides} scrollX={scrollX} />
          <NextButton scrollTo={scrollTo} percentage={(currentIndex + 1 ) * (100/slides.length)} />
        </View>
      )
    };
    
    const styles = StyleSheet.create({
        container:{
          flex:1,
          justifyContent:"center",
          alignItems:"center"
        }
    })

，这是我的导航，其中包含

import React from "react";
import { createNativeStackNavigator } from '@react-navigation/native-stack';


import LoginScreen from "../screens/LoginScreen";
import RegisterScreen from "../screens/RegisterScreen";
import WelcomeScreen from "../screens/WelcomeScreen";
import Onboarding from "../components/Getstarted/Onboarding"

const Stack = createNativeStackNavigator();

const AuthNavigator = () => (
  <Stack.Navigator>
    <Stack.Screen
      name="Welcome"
      component={WelcomeScreen}
      options={{ headerShown: false }}
    />
    <Stack.Screen name="Login" component={LoginScreen} />
    <Stack.Screen name="Register" component={RegisterScreen} />
  </Stack.Navigator>
);

export default AuthNavigator;

消费后的 欢迎屏幕很多时候我仍然无法在我的项目中正确导航它，谢谢如果有人可以帮助解决这个问题。

Answer 1

函数Onboarding可以接受两个参数route和navigation。您可以使用它们导航到其他屏幕

export function Onboarding({
  route,
  navigation
}) {
  // .. rest of the code
  if () {

  } else {
    navigation.navigate('NameOfScree', {
      // options
    })
  }
}