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

React-Native —如何使用react-navigation传递参数？

2 个答案: