如何通过 React Native 中的标题按钮从一个屏幕传递道具

Question

我是 React Native 的新手，我正在尝试从

pollQuestion

设置

QuestionGroup.js

的属性，并将其传递到下一页，

PollDetailsScreen

，然后单击右侧标题按钮

Send

。我该如何用

react-navigation

来做到这一点？

这是我想要实现的目标的可视化：

App.js

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Button } from 'react-native';
import { PollScreen } from './components/PollScreen';
import { PollDetailsScreen } from './components/PollDetailsScreen';
import { AppTheme } from './styles/Theme';
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { MainScreen } from "./components/MainScreen";

const Stack = createNativeStackNavigator()

function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaProvider>
        <NavigationContainer theme={AppTheme}>
          <Stack.Navigator initialRouteName="Main">
            ...
            <Stack.Screen name="NewPoll" component={PollScreen} options={({ navigation }) => ({
              title: 'New Poll',
              headerLeft: () => (
                <Button onPress={() => navigation.navigate('Main')}
                  title="Cancel"
                  color="#617A67" />
              ),
              headerRight: () => (
                <Button onPress={() =>
                  navigation.navigate('Poll', {
                    pollQuestion: 'This is a question',
                    pollOptions: []
                  })
                }
                  title="Send"
                  color='#617A67'
                />
              )
            })} />
            <Stack.Screen name="Poll" component={PollDetailsScreen} options={({ navigation }) => ({
              title: 'Poll',
              headerLeft: () => (
                <Button onPress={() => navigation.navigate('NewPoll')} title="Close" color='#617A67' />
              )
            })} />
          </Stack.Navigator>
        </NavigationContainer>
      </SafeAreaProvider>
    </GestureHandlerRootView>
  );
}

export default App;

PollScreen.js

import { View } from "react-native"
import { OptionsGroup } from "./OptionsGroup"
import { MultipleAnswersSwitch } from "./MultipleAnswers"
import { QuestionGroup } from "./QuestionGroup"

export function PollScreen() {
    return (
        <View style={{ margin: 24 }}>
            <QuestionGroup />
            <OptionsGroup />
            <MultipleAnswersSwitch />
        </View>
    )
}

QuestionGroup.js

import { StyleSheet, Text, TextInput, View } from "react-native";
import { useState } from "react"

export function QuestionGroup() {
    const [charCount, setCharCount] = useState("")

    return (
        <>
            <View>
                <Text>Question</Text>
                ...
            <TextInput style={inputBoxStyle.input} placeholder="Ask a question" multiline={true} onChangeText={value => {
                setCharCount(value)
            }} />
        </>
    )
}

const inputBoxStyle = StyleSheet.create({
    ...
})

PollDetailsScreen.js

import { useState } from "react";
import { FlatList, SafeAreaView, StatusBar, StyleSheet, Text, TouchableOpacity, View } from "react-native";
...

export function PollDetailsScreen({ navigation, route }) {
    const { pollQuestion, pollOptions } = route.params;
    ...


    return (
        <View>
            <Text>{pollQuestion}</Text>
            ...
        </View>
    )
}

const styles = StyleSheet.create({
    ...
});

Answer 1

您需要更新

pollScreen

组件来管理问题的状态，然后在导航时将其作为参数传递。

首先要更新

QuestionGroup.js

，通过使用回调函数将状态提升到

PollScreen.js

。这样，

PollScreen

就可以跟踪

pollQuestion

状态并将其传递给

PollDetailsScreen

。

然后在

QuestionGroup.js

中，接受一个用于设置问题的道具，并在文本输入更改时调用它：

export function QuestionGroup({ onQuestionChange }) {
    const [charCount, setCharCount] = useState("");

    return (
        <>
            <View>
                <Text>Question</Text>
                ...
                <TextInput
                    style={inputBoxStyle.input}
                    placeholder="Ask a question"
                    multiline={true}
                    onChangeText={value => {
                        setCharCount(value);
                        onQuestionChange(value); // Call the callback function with the new value
                    }}
                />
            </View>
        </>
    );
}

在

PollScreen.js

中，管理

pollQuestion

的状态并将其传递给

QuestionGroup

：

export function PollScreen({ navigation }) {
    const [pollQuestion, setPollQuestion] = useState("");

    return (
        <View style={{ margin: 24 }}>
            <QuestionGroup onQuestionChange={setPollQuestion} />
            <OptionsGroup />
            <MultipleAnswersSwitch />
            {/* Rest of your component */}
        </View>
    );
}

修改

headerRight

堆栈屏幕内

App.js

中的

PollScreen

按钮，以在导航到

pollQuestion

时使用

PollDetailsScreen

状态：

<Stack.Screen
    name="NewPoll"
    component={PollScreen}
    options={({ navigation }) => ({
        title: 'New Poll',
        // Other options...
        headerRight: () => (
            <Button
                onPress={() => navigation.navigate('Poll', {
                    pollQuestion: pollQuestion, // Use the state value
                    pollOptions: [] // And any other data you need to pass
                })}
                title="Send"
                color="#617A67"
            />
        )
    })}
/>

您仍然需要从

pollQuestion

组件获取

PollScreen

状态并将其传递给

options

prop 函数。这意味着要么进一步提升状态（到

App.js

）并在那里管理它，要么使用状态管理库