React Native中如何通过头部按钮在页面间传递props

要实现这个需求，核心是将输入状态提升到父组件，并动态设置导航栏按钮的点击逻辑，确保点击Send时能获取到最新的输入内容。以下是具体步骤：

1. 修改QuestionGroup为受控组件 #

让QuestionGroup不再自行管理输入状态，改为接收父组件传递的value和onChangeText方法，使父组件能实时获取输入内容：

// QuestionGroup.js
import { StyleSheet, Text, TextInput, View } from "react-native";

export function QuestionGroup({ value, onChangeText }) {
    return (
        <>
            <View>
                <Text>Question</Text>
                {/* 保留原有布局结构 */}
                <TextInput 
                    style={inputBoxStyle.input} 
                    placeholder="Ask a question" 
                    multiline={true} 
                    value={value}
                    onChangeText={onChangeText} 
                />
            </View>
        </>
    )
}

const inputBoxStyle = StyleSheet.create({
    // 保留原有样式定义
})

2. 在PollScreen中管理状态并动态设置导航按钮 #

在PollScreen中创建pollQuestion状态，传递给QuestionGroup，同时通过navigation.setOptions动态更新头部Send按钮的点击逻辑，确保点击时传递最新的输入值：

// PollScreen.js
import { View } from "react-native"
import { OptionsGroup } from "./OptionsGroup"
import { MultipleAnswersSwitch } from "./MultipleAnswers"
import { QuestionGroup } from "./QuestionGroup"
import { useState, useEffect } from "react"
import { Button } from "react-native"

export function PollScreen({ navigation }) {
    // 管理投票问题和选项的状态（选项逻辑可根据实际需求扩展）
    const [pollQuestion, setPollQuestion] = useState("")
    const [pollOptions, setPollOptions] = useState([])

    useEffect(() => {
        // 动态设置导航栏右侧的Send按钮
        navigation.setOptions({
            headerRight: () => (
                <Button 
                    onPress={() => {
                        // 跳转时传递最新的问题和选项参数
                        navigation.navigate('Poll', {
                            pollQuestion: pollQuestion,
                            pollOptions: pollOptions
                        })
                    }}
                    title="Send"
                    color='#617A67'
                />
            )
        })
    }, [navigation, pollQuestion, pollOptions]) // 状态变化时更新按钮逻辑

    return (
        <View style={{ margin: 24 }}>
            <QuestionGroup 
                value={pollQuestion}
                onChangeText={setPollQuestion}
            />
            <OptionsGroup 
                // 若需要传递选项状态，可参考QuestionGroup的方式处理
                // value={pollOptions}
                // onChange={setPollOptions}
            />
            <MultipleAnswersSwitch />
        </View>
    )
}

3. 移除App.js中静态的headerRight配置 #

因为导航栏的Send按钮已由PollScreen动态设置，所以删除App.js中NewPoll页面的headerRight配置：

// App.js 中NewPoll的Stack.Screen部分
<Stack.Screen name="NewPoll" component={PollScreen} options={({ navigation }) => ({
    title: 'New Poll',
    headerLeft: () => (
        <Button onPress={() => navigation.navigate('Main')}
            title="Cancel"
            color="#617A67" />
    ),
    // 移除原有headerRight配置
})} />

4. PollDetailsScreen接收参数（确认现有逻辑即可） #

你的PollDetailsScreen已经正确通过route.params接收参数，只需确保参数名称与传递时一致：

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

    return (
        <View>
            <Text>{pollQuestion}</Text>
            {/* 其他页面内容 */}
        </View>
    )
}

核心逻辑说明 #

• 状态提升：将输入状态从QuestionGroup提升到PollScreen，让父组件能统一管理和获取最新的输入内容。
• 动态导航选项：App.js中的导航选项是静态的，无法实时响应组件内部状态变化，因此在PollScreen中使用useEffect监听状态变化，动态更新按钮的点击逻辑，确保传递最新的pollQuestion值。

内容的提问来源于stack exchange，提问作者Jeremy Chee