javascript - 按下 FlatList 项目时移动到另一个屏幕，截至目前我在 pressHandler() 中打印键值

Question

我对本机反应非常陌生，我想在执行 pressHandler() 函数时移至新屏幕。截至目前，我只打印键值。但是当按下任何 FlatList 项时，我想移至 NewScreen.js

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

无论如何，我希望 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>
    );
  }
}

标签： javascriptreact-native

Answer 1

你可以使用反应导航。 https://reactnavigation.org/docs/hello-react-navigation

对于您的代码，您可以创建一个 RootStack，导入两个组件。然后将它们放在堆栈屏幕中。我将您的 App() 重命名为 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;

然后在您的 FirstScreen（当前是您的 App 文件）中，您只需使用 navigation.navigate("NewScreen") 即可进入新屏幕。

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