我卡住了,因为我想切换到 react 导航的 V5 版本。 使用 v4,我过去常常传递我的参数并将它们用于:
- 设置:
this.props.navigation.navigate('MyDestination', {myParam: 'value'})
- 获取:
this.props.navigation.getParam('myParam')
在 v5 中,有些事情发生了变化,我现在无法使用 this.props.navigation
,因为应用程序似乎不知道它。
我的代码被拆分了,所以我的 App.js 只引用了 Navigation 类:
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(我删除了所有样式部分以缩短此处显示的代码):
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()
函数。
这个问题是,要在 header 中使用一个特定的函数,我必须在 componentDidMount()
函数之后绑定(bind)它,但是 render()
下存在的值> 尚不清楚。
我该如何解决这个问题? (请确保在给定的示例中,导航部分中的所有代码允许轻松使用 navigation
和 route
但你明白我必须拆分我的代码。
谢谢。
最佳答案
好的,所以每次都一样,我尝试了很多天来解决我的问题,当我最终决定在堆栈上发布时,我找到了解决方案:)。
因此,如果您在查看我的代码时发现了一些性能问题或其他问题,请随时纠正我。我刚刚发现这个解决方案解决了我的问题。
所以在我的 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>
)}
然后在我的类(class)中,我只需调用 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>
})
我必须这样做,因为我使用的是在我的类中声明的函数,所以我必须像这样在构造函数中绑定(bind)它 this._goToSettings = this._goToSettings.bind(this)
然后将其添加到 navigation.setParams
函数中。
关于class - 在类中存在的 header 中使用 'navigation' 和 'route' - React-navigation v5,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60277929/