在React Native中的类组件中引入路由参数,可以通过以下步骤实现:
createStackNavigator
。import { createStackNavigator } from 'react-navigation';
class MyComponent extends React.Component {
// 定义路由参数
static navigationOptions = ({ navigation }) => {
return {
title: navigation.getParam('title', 'Default Title'),
};
};
render() {
// 使用路由参数
const { navigation } = this.props;
const title = navigation.getParam('title', 'Default Title');
return (
<View>
<Text>{title}</Text>
</View>
);
}
}
const AppNavigator = createStackNavigator({
MyComponent: { screen: MyComponent },
});
import { createAppContainer } from 'react-navigation';
const AppContainer = createAppContainer(AppNavigator);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
现在,你可以在其他地方使用导航来传递参数到MyComponent
组件中。例如:
this.props.navigation.navigate('MyComponent', { title: 'Hello World' });
在MyComponent
组件中,你可以通过this.props.navigation.getParam('title', 'Default Title')
来获取传递的参数值。如果没有传递参数,则使用默认值。
这样,你就成功在React Native中的类组件中引入了路由参数。
领取专属 10元无门槛券
手把手带您无忧上云