Class 使用'；导航'；和'；路线'；类中存在内部标题-React navigation v5

我被卡住了，因为我想切换到react navigation的V5版本。 使用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',
  },
});

从“React”导入React；
从“react native”导入{样式表、文本、视图}
从“./Navigation/Navigation”导入导航
导出默认函数App（）{
返回(
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
});

然后，我的导航文件包含所有导航机制（我还没有添加选项卡栏，因为我想先修复基本导航）：

从'@react-navigation/native'导入{NavigationContainer}
从“@react navigation/stack”导入{createStackNavigator}
从“反应导航选项卡”导入{CreateBoottomTabNavigator}
从“react native”导入{样式表，图像}
从“React”导入React
从“../components/Home”导入Home
从“../components/LendList”导入LendList
从“../components/AddMoney”导入AddMoney
从“../components/AddStuff”导入AddStuff
从“../components/Settings”导入设置
从“../components/Test”导入测试
功能主屏幕（）{
返回(
)
}
函数LendListScreen（）{
返回(
)
}
const Stack=createStackNavigator（）
函数App（）{
返回(
)
}
导出默认应用程序

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

从“React”导入React
从“react native”导入{样式表、文本、图像、视图、按钮、TouchableOpacity}
从“反应时刻”导入时刻
从'@react-navigation/native'导入{CommonActions}
从'@react-navigation/native'导入{useNavigation}
类Home扩展了React.Component{
静态导航选项=（）=>{
返回{
headerRight:（）=>this.goToSettings（）}>
}
}
建造师（道具）{
超级（道具）
this.\u goToSettings=this.\u goToSettings.bind（this）
}
_updateNavigationParams（）{
navigation.setParams({
goToSettings：这个。\u goToSettings
})
}
componentDidMount（）{
控制台日志（“导航”）
此。_updateNavigationParams（）
}
_支票详细信息（导航）{
navigation.navigate（'LendList'，{type:'Money'}）
}
_checkStuffDetails（导航）{
导航（'LendList'，{type:'Stuff'}）
}
_checkPeopleDetails（导航）{
导航（'LendList'，{type:'People'}）
}
_goToSettings=（）=>{
navigation.navigate（'Settings'））
}
render（）{
const date=新日期（）；
const{navigation}=this.props；
返回(
吉维多姆
神经元：{'}
{/*TODO:Penserárérer套房日期转换格式*/}
请注意：
XXX$
{这._checkMoneyDetails（导航）}}/>
XXX对象
{this.\u checkStuffDetails（导航）}}/>
XXX人
{this.\u checkPeopleDetails（导航）}}/>
a、 维塞拉公司。
)
}    
}
导出默认主页

我的问题是，根据在线文档，我看到要在类中使用“导航”或“路由”，我应该在

render（）

函数之后使用

const-navigation={this.props}

这个问题是，要在头中使用一个特定函数，我必须在

componentDidMount（）

函数之后绑定它，但是

render（）

下的值还不知道

我怎样才能解决这个问题？（请确保在给定示例中，导航部分中的所有代码都允许轻松使用

导航

和

路线

，但您知道我必须拆分代码

---

谢谢。

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

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

因此，在我的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>
)}

我必须这样做，因为我使用的是类中声明的函数，所以我必须像这样在构造函数中绑定它

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

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

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