首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >React-Native -如何使用react导航传递参数?

React-Native -如何使用react导航传递参数?
EN

Stack Overflow用户
提问于 2018-08-19 03:52:56
回答 2查看 3.2K关注 0票数 2

我试图动态地将标题从一个卡片组件传递到一个使用createMaterialTopTabNavigator(Tab)的堆栈。这些路由当前与组件分离,并存在于一个名为navigation.js的文件中。如何在navigation.js中将参数从组件传递到堆栈?

提前谢谢你。

Card.js

代码语言:javascript
复制
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

代码语言:javascript
复制
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 />
    }
}
EN

回答 2

Stack Overflow用户

发布于 2018-08-19 04:47:41

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

代码语言:javascript
复制
static navigationOptions=  ({
title: this.props.navigation.state.params.title
headerLeft: null,
})
票数 3
EN

Stack Overflow用户

发布于 2018-08-19 05:01:26

如果你使用一个单独的文件来处理你的导航。解决方案是:

代码语言:javascript
复制
    Details: {
        screen: Tab,
        navigationOptions: props => ({
            title: props.navigation.state.params.title,
        }),
    },
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51912087

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档