我需要让我的按钮重定向到另一个页面（js文件）

Question

我有一个带有具有 onClick 功能的按钮的主页，但现在我需要让按钮能够将我引导到不同的页面。

这是我的主页 atm：

import React, { Component } from 'react';
import { Button, StyleSheet, View } from 'react-native';
import { Link } from 'react-router-dom'


export default class ButtonBasics extends Component {

  render() {

    return (
      <View style={styles.container}>
        <View style={styles.buttonContainer}>
          <Button
            onPress={pressHandler}
            title="Lesson 1"
          />
        </View>
        <View style={styles.buttonContainer}>
          <Button
            onPress={pressHandler}
            title="Lesson 2"
            color="#841584"
          />
        </View>
      </View>
    );
  }
}

我需要按钮来引导我到同一个地图中的一个 js 文件，最好的方法是什么，我对 react native 还是很陌生。

这是需要被引导到的页面：

import React, {useState} from 'react';
import { StyleSheet, View, Text, ButtonSafeAreaView,TouchableOpacity,FlatList,SafeAreaView} from 'react-native';
import { globalStyles } from '../../../styles/global';
const GLOBAL = require('../../assets/Globals');
const lessondata = ("../../assets/json/" + global.currentLesson + ".json");
import jsondata from "../../assets/json/1.json";

export default function Lessen({ App, navigation }) {

    const pressHandler = () => {
        navigation.goBack();
      }

    const DATA = jsondata["data"];

      function Item({ id, title, selected, onSelect }) {
        return (
          <TouchableOpacity
            onPress={() => onSelect(id)}
            style={[
              styles.item,
              { backgroundColor: selected ? '#6e3b6e' : '#f9c2ff' },
            ]}
          >
            <Text style={styles.title}>{title}</Text>
          </TouchableOpacity>
        );
      }

        const [selected, setSelected] = React.useState(new Map());

        const onSelect = React.useCallback(
          id => {
            const newSelected = new Map(selected);
            newSelected.set(id, !selected.get(id));

            setSelected(newSelected);
          },
          [selected],
        );


        return (
          <SafeAreaView style={globalStyles.container}>
            <FlatList
              data={DATA}
              renderItem={({ item }) => (
                <Item
                  id={item.id}
                  title={item.title}
                  selected={!!selected.get(item.id)}
                  onSelect={onSelect}
                />
              )}
              keyExtractor={item => item.id}
              extraData={selected}
            />
          </SafeAreaView>
        );
      }

Answer 1

React Navigation(Stack) 将为您工作 react navigation

步骤：- 1.为导航创建一个单独的文件

1. 在导航组件中导入两个组件

2. onPress 调用navigation.navigate('TargetComponent')

希望对您有所帮助。