在 React-navigation v5 中存在的标头中使用"导航"和"路由"

Question

我被卡住了，因为我想切换到V5版本的react导航。在v4中，我曾经传递我的参数并将其与一起使用

• 设置：

this.props.navigation.navigate('MyDestination', {myParam: 'value'})

• 获取：

this.props.navigation.getParam('myParam')

有了v5，有些事情发生了变化，我现在不能使用this.props.navigation，因为应用程序似乎不知道它。

我的代码被拆分了，所以我的App.js只引用导航类：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native'
import Navigation from './navigation/Navigation'
export default function App() {
return (
<Navigation/>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

然后我的导航文件包含了所有的导航机制(我还没有添加TabBar，因为我想先修复基本导航(：

import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import { createBottomTabNavigator } from 'react-navigation-tabs'
import { StyleSheet, Image } from 'react-native'
import React from 'react'
import Home from '../components/Home'
import LendList from '../components/LendList'
import AddMoney from '../components/AddMoney'
import AddStuff from '../components/AddStuff'
import Settings from '../components/Settings'
import Test from '../components/Test'
function HomeScreen() {
return(
<Home/>
)
}
function LendListScreen() {
return(
<LendList/>
)
}
const Stack = createStackNavigator()
function App() {
return(
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home"
component={Home} 
options={{ title: "Home Page"}}
/>
<Stack.Screen name="LendList" 
component={LendList}
options={{ title: 'Liste' }}
/>
<Stack.Screen name="AddMoney"
component={AddMoney} 
options={{ title: "Ajout Money"}}
/>
<Stack.Screen name="AddStuff"
component={AddStuff} 
options={{ title: "Ajout Stuff"}}
/>
<Stack.Screen name="Settings"
component={Settings} 
options={{ title: "Settings"}}
/>
<Stack.Screen name="Test"
component={Test} 
options={{ title: "Test"}}
/>
</Stack.Navigator>
</NavigationContainer>
)
}
export default App

然后是我的每个页面(用类编码(，这里有一个例子，Home.js(我删除了所有的Style部分，以缩短这里显示的代码(：

import React from 'react'
import { StyleSheet, Text, Image, View, Button, TouchableOpacity } from 'react-native'
import Moment from 'react-moment'
import { CommonActions } from '@react-navigation/native'
import { useNavigation } from '@react-navigation/native'
class Home extends React.Component {
static navigationOptions = () => {
return {
headerRight: () => <TouchableOpacity style={styles.settings_touchable_headerrightbutton}
onPress={() => this.goToSettings()}>
<Image style={styles.settings_image}
source={require('../assets/ic_settings.png')} />
</TouchableOpacity>
}
}
constructor(props) {
super(props)
this._goToSettings = this._goToSettings.bind(this)
}
_updateNavigationParams() {
navigation.setParams({
goToSettings: this._goToSettings
})
}
componentDidMount(){
console.log("navigation")
this._updateNavigationParams()
}
_checkMoneyDetails(navigation){
navigation.navigate('LendList', {type: 'Money'})
}
_checkStuffDetails(navigation){
navigation.navigate('LendList', {type: 'Stuff'})
}
_checkPeopleDetails(navigation){
navigation.navigate('LendList', {type: 'People'})
}
_goToSettings = () => {
navigation.navigate('Settings')
}
render(){
const date = new Date();
const { navigation } = this.props;
return(
<View style={styles.main_container}>
<View style={styles.header_view}>
<Text style={styles.header_text}>GiViToMe</Text>
<Text style={styles.header_text}>Nous sommes le :{' '}
{/* TODO: Penser à gérer ensuite les formats de date étrangers */}
<Moment element={Text} format="DD/MM/YYYY" date={date}/>
</Text>
</View>
<View style={styles.lend_view}>
<Text style={styles.title_lend_text}>Vos prêts :</Text>
<View style={styles.money_stuff_view}>
<View style={styles.money_view}>
<View style={styles.money_data_view}>
<Image source={require('../assets/ic_money.png')} style={styles.home_img} />
<Text>XXX $</Text>
</View>
<Button title='Money' onPress={() => {this._checkMoneyDetails(navigation)}}/>
</View>
<View style={styles.stuff_view}>
<View style={styles.stuff_data_view}>
<Image source={require('../assets/ic_box.png')} style={styles.home_img} />
<Text>XXX objets</Text>
</View>
<Button title='Stuff' onPress={() => {this._checkStuffDetails(navigation)}}/>
</View>
</View>
<View style={styles.people_view}>
<View style={styles.people_data_view}>
<Image source={require('../assets/ic_people.png')} style={styles.home_img} />
<Text>XXX people</Text>
</View>
<Button title='People' onPress={() => {this._checkPeopleDetails(navigation)}}/>
</View>
</View>
<View style={styles.footer_view}>
<Text style={styles.text_footer_view}>a.vescera inc.</Text>
</View>
</View>
)
}    
}
export default Home

我的问题是，根据在线文档，我看到要在类中使用"导航"或"路线"，我应该在render()函数之后使用const navigation = { this.props }。

这个问题是，要在头中使用一个特定的函数，我必须将其绑定在componentDidMount()函数之后，但render()下的值尚不清楚。

我该如何解决这个问题？(请注意，在给定的示例中，导航部分中的所有代码都允许轻松使用navigation和route，但您知道我必须拆分代码。

谢谢。

Answer 1

好的，所以每次都一样，我试着花很多天的时间来解决我的问题，当我最终决定在堆栈上发布时，我找到了一个解决方案：(。

所以，如果你在查看我的代码时发现了一些性能问题，请毫不犹豫地纠正我。我刚刚发现这个解决方案解决了我的问题。

因此，在我的Navigation.js文件中，我只是将导航和路由对象传递到我的类中，以使它们可用，这要归功于这些道具，比如：

function App() {
return(
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home"
component={Home} 
options={({route, navigation}) => (
{headerTitle: 'Home Page', 
route: {route}, 
navigation: {navigation}}
)}
/>
</Stack.Navigator>
</NavigatorContainer>
)}

然后在我的类中，我只调用this.props.navigation或this.props.route，并从这些对象中收集我需要的东西。

另一件事是，对于那些使用此代码构建类似内容的人来说，我还必须更改显示标题按钮的方式。我不再使用static navigationOptions = () => {}。我只是在ComponentDidMount函数中直接添加navigation.setOptions代码，如下所示：

navigation.setOptions({
headerRight: () => <TouchableOpacity style={styles.settings_touchable_headerrightbutton}
onPress={() => route.params.goToSettings()}>
<Image style={styles.settings_image}
source={require('../assets/ic_settings.png')} />
</TouchableOpacity>
})

我必须这样做，因为我使用的是类中声明的函数，所以我必须将它绑定到像this._goToSettings = this._goToSettings.bind(this)这样的构造函数中，然后将它添加到navigation.setParams函数中。

Answer 2

当navigation.setOptions代码写入componentDidMount时，在navigation和route关键字之前添加this.props。以下是对我有用的代码片段。

this.props.navigation.setOptions({
headerRight: () => <TouchableOpacity style={styles.settings_touchable_headerrightbutton}
onPress={() => this.props.route.params.goToSettings()}>
<Image style={styles.settings_image}
source={require('../assets/ic_settings.png')} />
</TouchableOpacity>
})