在类中存在的标头内使用“导航”和“路线” - React-navigation v5

Question

我被困住了，因为我想切换到 React-navigation 的 V5 版本。\n在 v4 中，我曾经传递我的参数并将它们与以下命令一起使用：

\n\n

\n
• 放 ：
\n

\n\n

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

\n\n

\n
• 得到 ：
\n

\n\n

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

\n\n

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

\n\n

我的代码被拆分，因此我的 App.js 仅引用导航类：

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

我该如何解决这个问题？（确保在给定的示例中，导航部分中的所有代码都可以轻松使用navigation，route但您知道我必须拆分我的代码。

\n\n

谢谢。

\n

Answer 1

好吧，所以每次同样，我尝试很多天来解决我的问题，当我最终决定在堆栈上发布时，我找到了解决方案:)。

因此，如果您通过查看我的代码可能发现一些性能问题或其他问题，请随时纠正我。我刚刚发现这个解决方案解决了我的问题。

因此，在我的 Navigation.js 文件中，我只是传递了导航和路线对象，以便通过我的类中的 props 使它们可用，如下所示：

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 = () => {}。我只是直接navigation.setOptions在函数中添加代码片段，ComponentDidMount如下所示：

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函数中。