Мне нужно перенаправить мою кнопку на другую страницу (файл js) - PullRequest
Новая
       7

Мне нужно перенаправить мою кнопку на другую страницу (файл js)

0 голосов
/ 27 мая 2020

У меня есть главная страница с кнопками, которые имеют функцию 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>
        );
      }

1 Ответ

1 голос
/ 27 мая 2020

React Navigation (Stack) будет работать для вас React Navigation

Шаги: - 1. Создайте отдельный файл для навигации

импортировать оба компонента в компонент навигации

вызывается onPress navigation.navigate('TargetComponent')

Надеюсь, это поможет.

...