Javascript 反应自然—；如何使用react导航传递参数？

我正在尝试将标题从卡片组件动态传递到使用

createMaterialTopTabNavigator

（选项卡）的堆栈。路由当前与组件分离，并存在于名为

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)

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 />
    }
}

import React，{Component}来自“React”
从“react native”导入{视图、文本、样式表、TouchableOpacity}
从“反应导航”导入{withNavigation}
类卡扩展组件{
静态容器样式={
宽度：343，
身高：281，
}
render（）{
const{data}=this.props
console.log（数据）
返回(
this.props.navigation.navigate（'Details'，{title:data.title}）}>
{data.title？data.title:'title'}
{data.date？data.date:'date'}
{data.price？data.price:'price'}
{data.oldPrice？data.oldPrice:'oldPrice'}
)
}
}
使用导航（卡）导出默认值

navigation.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)

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 />
    }
}

从“React”导入React
从“反应导航”导入{createMaterialTopTabNavigator}
从“反应导航”导入{createStackNavigator}
从“../screens/Filter”导入筛选器
从“../screens/Dates”导入日期
从“../screens/Shows”导入节目
从“../screens/Details”导入详细信息
从“../screens/ShowDetail”导入ShowDetail
从“../screens/Modal”导入模态
常量选项卡=createMaterialTopTabNavigator(
{
详情:详情,，
书：日期，
},
{
选项卡选项：{
activeTintColor:'黑色'，
颜色：“灰色”，
风格：{
背景颜色：“白色”，
},
指标类型：{
背景颜色：“黑色”，
},
大写标签：false，
},
},
)
导出常量MainStack=createStackNavigator(
{
主页：{
屏幕：显示，
导航选项：{
标题:"节目",，
},
},
详情：{
屏幕：选项卡，
导航选项：{
标题：'显示标题'，//标题需要到这里
headerLeft:null，
},
},
},
{
initialRouteName:“主页”，
导航选项：{
头型：{
背景颜色：“白色”，
身高：98，
//iOS
边框底部宽度：0，
//安卓
海拔：0，
},
HeaderIntColor:'黑色'，
头饰样式：{
fontWeight:'粗体'，
},
headerBackTitle:null，
},
},
)
导出默认类App扩展React.Component{
render（）{
返回
}
}

在详细信息组件中，执行以下操作-

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

---

如果您使用单独的文件来处理导航。解决办法是：

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

---

谢谢，奥卢索拉。如果组件中有

导航选项，则您的答案是正确的，但事实并非如此。