我试图动态地将标题从一个卡片组件传递到一个使用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 />
}
}
发布于 2018-08-19 04:47:41
在详细信息组件中,执行以下操作-
static navigationOptions= ({
title: this.props.navigation.state.params.title
headerLeft: null,
})
发布于 2018-08-19 05:01:26
如果你使用一个单独的文件来处理你的导航。解决方案是:
Details: {
screen: Tab,
navigationOptions: props => ({
title: props.navigation.state.params.title,
}),
},
https://stackoverflow.com/questions/51912087
复制相似问题