RN react-navigation 3 的使用
基于 3.3.2 测试。(PS:这个版本变的真快啊,我一年前还在用 1.5.11,导致很多API 变了都有点不知所措,重新学习一下基础啊。)
简单代码:
import React from 'react';
import { View, Text, Button } from 'react-native';
import { createAppContainer, createStackNavigator, StackActions, NavigationActions } from 'react-navigation';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Home Screen',
}
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title="Go to Details"
onPress={() => {
// this.props.navigation.dispatch(StackActions.reset({
// index: 0,
// actions: [
// NavigationActions.navigate({ routeName: 'Details' })
// ],
// }))
this.props.navigation.navigate('Details',{content:'木子才'})
}}
/>
</View>
);
}
}
class DetailsScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
title: `Chat with ${navigation.state.params.content}`,
};
};
render() {
const { params } = this.props.navigation.state;
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen with {params.content}</Text>
<Button title="Go to Back" onPress={() => this.props.navigation.goBack()}/>
</View>
);
}
}
const RootStack = createStackNavigator({
Home: {
screen: HomeScreen,
},
Details: {
screen: DetailsScreen,
},
}, {
initialRouteName: 'Home',
});
const AppContainer = createAppContainer(RootStack);
// export default createAppContainer(RootStack);
export default class App extends React.Component<Props> {
constructor(props) {
super(props)
}
render() {
return <AppContainer />;
}
}