React-Native —如何使用react-navigation傳遞參數？

Question

我試圖將標題從Card組件動態傳遞到使用createMaterialTopTabNavigator （Tab）的堆棧。 路由當前與組件分離，並存在於名為navigation.js的文件中。 如何將參數從組件傳遞到navigation.js的堆棧？

先感謝您。

Card.js

import React, { Component } from 'react'
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
import { withNavigation } from 'react-navigation'

class Card extends Component {
    static containerStyle = {
        width: 343,
        height: 281,
    }

    render() {
        const { data } = this.props
        console.log(data)
        return (
            <View style={[styles.root, this.props.style]}>
                <TouchableOpacity onPress={() => this.props.navigation.navigate('Details', { title: data.title })}>
                    <View style={styles.imgWrapper} />
                    <View style={styles.info}>
                        <View style={styles.infoLeft}>
                            <Text style={styles.title}>{data.title ? data.title : 'Title'}</Text>
                            <Text style={styles.subTitle}>{data.date ? data.date : 'Date'}</Text>
                        </View>
                        <View style={styles.infoRight}>
                            <Text style={styles.price}>{data.price ? data.price : 'Price'}</Text>
                            <Text style={styles.oldPrice}>{data.oldPrice ? data.oldPrice : 'Old price'}</Text>
                        </View>
                    </View>
                </TouchableOpacity>
            </View>
        )
    }
}

export default withNavigation(Card)

navigation.js

import React from 'react'
import { createMaterialTopTabNavigator } from 'react-navigation'
import { createStackNavigator } from 'react-navigation'

import Filter from '../screens/Filter'
import Dates from '../screens/Dates'
import Shows from '../screens/Shows'
import Details from '../screens/Details'
import ShowDetail from '../screens/ShowDetail'
import Modal from '../screens/Modal'

const Tab = createMaterialTopTabNavigator(
    {
        Details: Details,
        Book: Dates,
    },
    {
        tabBarOptions: {
            activeTintColor: 'black',
            inactiveTintColor: 'gray',
            style: {
                backgroundColor: 'white',
            },
            indicatorStyle: {
                backgroundColor: 'black',
            },
            upperCaseLabel: false,
        },
    },
)

export const MainStack = createStackNavigator(
    {
        Home: {
            screen: Shows,
            navigationOptions: {
                title: 'Shows',
            },
        },
        Details: {
            screen: Tab,
            navigationOptions: {
                title: 'Show title', // TITLE NEEDS TO COME HERE
                headerLeft: null,
            },
        },
    },
    {
        initialRouteName: 'Home',
        navigationOptions: {
            headerStyle: {
                backgroundColor: 'white',
                height: 98,
                // iOS
                borderBottomWidth: 0,
                // Android
                elevation: 0,
            },
            headerTintColor: 'black',
            headerTitleStyle: {
                fontWeight: 'bold',
            },
            headerBackTitle: null,
        },
    },
)

export default class App extends React.Component {
    render() {
        return <MainStack />
    }
}

Answer 1

在“詳細信息”組件中，執行以下操作-

static navigationOptions=  ({
title: this.props.navigation.state.params.title
headerLeft: null,
})

Answer 2

如果您使用單獨的文件來處理導航。 解決方案是：

    Details: {
        screen: Tab,
        navigationOptions: props => ({
            title: props.navigation.state.params.title,
        }),
    },