Блог

Я очень новичок в react native и хочу перейти на новый экран при выполнении функции pressHandler(). на данный момент я печатаю только значение ключа. но я хочу перейти к NewScreen.js при нажатии ЛЮБОГО элемента плоского списка

Когда функция pressHandler выполняется в App.js Я хочу перейти к новому экрану

 // App.js
import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  Image,
  SafeAreaView,
  FlatList,
  TouchableOpacity,
  NavigationContainer,
} from "react-native";
import NewScreen from "/Users/anishpahilajani/Documents/Anish/React Native/DoneWithIt/NewScreen.js";


export default function App() {
  const [thing, key] = useState([
    { mach: "MA1", key: 1 },
    { mach: "MA2", key: 2 },
    { mach: "MA3", key: 3 },
    { mach: "MA4", key: 4 },
  ]);

  const pressHandler = (key) => {
    // THis is where I want to move to a new screen
    // It can be the same screen no matter which item is pressed
    console.log(key);
  };

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={thing}
        renderItem={({ item }) => (
          <TouchableOpacity onPress={() => pressHandler(item.key)}>
            <Text style={styles.item}>{item.mach}</Text>
          </TouchableOpacity>
          //<Text style={styles.item}>{item.mach}</Text>
        )}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    paddingTop: 40,
    paddingHorizontal: 20,
  },
  item: {
    marginTop: 24,
    padding: 30,
    backgroundColor: "cyan",
    fontSize: 24,
  },
});

  

Я хочу NewScreen.js для отображения независимо от того, какой элемент в списке FlatItem нажат

 // NewScreen.js
import { StatusBar } from "expo-status-bar";
import React, { useState } from "react";
import { Component } from "react";
import { render } from "react-dom";
import {
  StyleSheet,
  Text,
  View,
  Image,
  SafeAreaView,
  FlatList,
  TouchableOpacity,
  NavigationContainer,
} from "react-native";

export default class NewScreen extends Component {
  render() {
    return (
      <SafeAreaView>
        <Text>This is new Screen</Text>
      </SafeAreaView>
    );
  }
}

  

вы можете использовать навигацию react. https://reactnavigation.org/docs/hello-react-navigation

Для вашего кода вы можете просто создать корневой стек, импортировать оба компонента. Затем поместите их на экраны стека. Я переименовал ваше приложение () в FirstScreen .

 import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import FirstScreen from 'firstScreen.file";
import NewScreen from 'newScreen.js';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="FirstScreen" component={FirstScreen} />
        <Stack.Screen name="NewScreen" component={NewScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;
  

затем на вашем первом экране (в настоящее время ваш файл приложения) вы просто используете navigation.navigate («Новый экран»), чтобы перейти к новому экрану.

 export default function FirstScreen(props) {
  const [thing, key] = useState([
    { mach: "MA1", key: 1 },
    { mach: "MA2", key: 2 },
    { mach: "MA3", key: 3 },
    { mach: "MA4", key: 4 },
  ]);

  const pressHandler = (key) => {
    // THis is where I want to move to a new screen
    // It can be the same screen no matter which item is pressed
    props.navigation.navigate("NewScreen");
    console.log(key);
  };

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={thing}
        renderItem={({ item }) => (
          <TouchableOpacity onPress={() => pressHandler(item.key)}>
            <Text style={styles.item}>{item.mach}</Text>
          </TouchableOpacity>
          //<Text style={styles.item}>{item.mach}</Text>
        )}
      />
    </SafeAreaView>
  );
}