通过单击按钮发送到另一个反应本机组件

Question

我试图通过 React Native 获取“开始”按钮，将我带到名为 Wallet 的 Home 组件，但是如果我单击该按钮什么也没有发生，我如何通过单击按钮发送到组件来解决这个问题

通过按钮发送到钱包启动的主页组件，但当前按钮不可点击。

代码：

import React from "react";
import { Text, View, Image, Pressable, TouchableOpacity} from "react-native";
import { NavigationContainer, useNavigation } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import Home from "../Home/Home";

const Stack = createNativeStackNavigator();

const GetStartedBtn = ({ title }) => {
  const navigation = useNavigation();

  return (
    <Pressable
      style={{
        display: "flex",
        width: 327,
        paddingVertical: 14,
        paddingHorizontal: 115,
        alignItems: "flex-start",
        gap: 10,
        borderRadius: 16,
        backgroundColor: "#6552FE",
        marginTop: 40,
        marginLeft: 20,
      }}
      onPress={() => {
        navigation.navigate("Wallet");
      }}
    >
      <Text style={{ color: "#fff", fontFamily: "SFProText-Semibold" }}>
        {title}
      </Text>
    </Pressable>
  );
};

export default function Start() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Wallet" component={Home} />
      </Stack.Navigator>

      <View>
        <View>
          <Image
            source={require("../../assets/logo/logo2.png")}
            alt="Logo"
            style={{
              width: 400,
              height: 400,
              resizeMode: "contain",
              marginTop: -110,
            }}
          />
        </View>
        <View>
          <Image
            source={require("../../assets/img/start/startimage.png")}
            alt=""
            style={{
              width: 400,
              height: 400,
              flexShrink: 0,
              resizeMode: "contain",
              marginTop: -100,
              justifyContent: "center",
              alignItems: "center",
            }}
          />
        </View>
        <Text
          style={{
            color: "#fff",
            fontFamily: "SFProText-Semibold",
            fontSize: 32,
            fontStyle: "normal",
            fontWeight: 500,
            marginLeft: 20,
            marginTop: -30,
            width: 300,
          }}
        >
          Jump start your crypto portfolio
        </Text>
        <Text
          style={{
            color: "#fff",
            fontFamily: "SFProText-Light",
            marginLeft: 20,
            marginTop: 20,
            fontSize: 14,
            fontStyle: "normal",
          }}
        >
          Take your investment portfolio to the next level
        </Text>
        <View>
          <GetStartedBtn title="Get Started" />
        </View>
      </View>
    </NavigationContainer>
  );
}

Answer 1

您应该有另一个屏幕，其中堆栈导航器中包含启动按钮。

import React from "react";
import { Text, View, Image, Pressable, TouchableOpacity} from "react-native";
import { NavigationContainer, useNavigation } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import Home from "../Home/Home";

const Stack = createNativeStackNavigator();

const GetStartedBtn = ({ title }) => {
  const navigation = useNavigation();

  return (
    <Pressable
      style={{
        display: "flex",
        width: 327,
        paddingVertical: 14,
        paddingHorizontal: 115,
        alignItems: "flex-start",
        gap: 10,
        borderRadius: 16,
        backgroundColor: "#6552FE",
        marginTop: 40,
        marginLeft: 20,
      }}
      onPress={() => {
        navigation.navigate("Wallet");
      }}
    >
      <Text style={{ color: "#fff", fontFamily: "SFProText-Semibold" }}>
        {title}
      </Text>
    </Pressable>
  );
};

function Splash() {
 return (
      <View style={{flex: 1}}>
        <View>
          <Image
            source={require("../../assets/logo/logo2.png")}
            alt="Logo"
            style={{
              width: 400,
              height: 400,
              resizeMode: "contain",
              marginTop: -110,
            }}
          />
        </View>
        <View>
          <Image
            source={require("../../assets/img/start/startimage.png")}
            alt=""
            style={{
              width: 400,
              height: 400,
              flexShrink: 0,
              resizeMode: "contain",
              marginTop: -100,
              justifyContent: "center",
              alignItems: "center",
            }}
          />
        </View>
        <Text
          style={{
            color: "#fff",
            fontFamily: "SFProText-Semibold",
            fontSize: 32,
            fontStyle: "normal",
            fontWeight: 500,
            marginLeft: 20,
            marginTop: -30,
            width: 300,
          }}
        >
          Jump start your crypto portfolio
        </Text>
        <Text
          style={{
            color: "#fff",
            fontFamily: "SFProText-Light",
            marginLeft: 20,
            marginTop: 20,
            fontSize: 14,
            fontStyle: "normal",
          }}
        >
          Take your investment portfolio to the next level
        </Text>
        <View>
          <GetStartedBtn title="Get Started" />
        </View>
      </View>
 )
}
export default function Start() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Splash" component={Splash} />
        <Stack.Screen name="Wallet" component={Home} />
      </Stack.Navigator>

    </NavigationContainer>
  );
}