Javascript 按下FlatList项时移到另一个屏幕，现在我在pressHandler（）中打印键值

我对react native非常陌生，我想在执行pressHandler（）函数时转到一个新屏幕。现在，我只打印键值。但我想在按下任何平面列表项时转到NewScreen.js

// 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>
    );
  }
}

在App.js中执行pressHandler功能时，我想导航到一个新屏幕

// 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,
  },
});

//App.js
从“世博会状态栏”导入{StatusBar}；
从“React”导入React，{useState}；
进口{
样式表，
文本，
看法
形象,，
安全区域视图，
平面列表，
可触摸不透明度，
导航容器，
}从“反应本族语”；
从“/Users/anishpahilajani/Documents/Anish/React Native/DoneWithIt/NewScreen.js”导入新闻屏幕；
导出默认函数App（）{
常量[事物，键]=使用状态([
{马赫：“MA1”，键：1}，
{马赫：“MA2”，键：2}，
{马赫：“MA3”，键：3}，
{马赫：“MA4”，键：4}，
]);
const pressHandler=（键）=>{
//这就是我想要移动到新屏幕的地方
//无论按下哪个项目，它都可以是相同的屏幕
控制台日志（键）；
};
返回(
(
按Handler（item.key）}>
{item.mach}
//{item.mach}
)}
/>
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“fff”，
paddingTop:40，
水平方向：20，
},
项目：{
玛金托普：24，
填充：30，
背景颜色：“青色”，
尺寸：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>
    );
  }
}

//NewScreen.js
从“世博会状态栏”导入{StatusBar}；
从“React”导入React，{useState}；
从“react”导入{Component}；
从“react dom”导入{render}；
进口{
样式表，
文本，
看法
形象,，
安全区域视图，
平面列表，
可触摸不透明度，
导航容器，
}从“反应本族语”；
导出默认类新闻屏幕扩展组件{
render（）{
返回(
这是新屏幕
);
}
}

您可以使用react导航。

对于您的代码，您可以创建一个根堆栈，导入这两个组件。然后将它们放入堆栈屏幕中。我将你的应用程序（）重命名为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;

import*as React from'React'；
从“react native”导入{View，Text}；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator}；
从“FirstScreen.file”导入FirstScreen；
从“NewScreen.js”导入新闻屏幕；
const Stack=createStackNavigator（）；
函数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>
  );
}

导出默认功能第一屏（道具）{
常量[事物，键]=使用状态([
{马赫：“MA1”，键：1}，
{马赫：“MA2”，键：2}，
{马赫：“MA3”，键：3}，
{马赫：“MA4”，键：4}，
]);
const pressHandler=（键）=>{
//这就是我想要移动到新屏幕的地方
//无论按下哪个项目，它都可以是相同的屏幕
道具。导航。导航（“新闻屏幕”）；
控制台日志（键）；
};
返回(
(
按Handler（item.key）}>
{item.mach}
//{item.mach}
)}
/>
);
}