我需要将按钮重定向到另一个页面（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

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

2. 将两个组件都导入导航组件中

3. onPress称为navigation.navigate('TargetComponent')

希望帮助。