Я новичок в ReactNavite.Я играю с Android DrawerLayout.Я использую StackNavigator для перенаправления экрана.
Нужно ли ставить DrawerLayoutAndroid на каждом экране, потому что это не кажется логичным?Разве я не могу создать собственный класс и использовать его на каждом экране и какое-либо свойство, например, выбранное или невыбранное?
Screen1.js
export default class Screen1 extends Component<{}> {
static navigationOptions = {
header: null
};
onScreen1Click() {
this.refs["NAVDRAWER"].closeDrawer();
this.props.navigation.navigate("screen1");
}
onScreen2Click() {
this.refs["NAVDRAWER"].closeDrawer();
this.props.navigation.navigate("screen2");
}
render() {
return (
<DrawerLayoutAndroid
drawerWidth={300}
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() => {
return (
<ScrollView vertical={true}>
<View style={styles.drawerMenuSelectedView}>
<Text
style={styles.menuItemSelected}
onPress={() => this.onScreen1Click()}
>
Screen 1
</Text>
</View>
<View style={styles.drawerMenuUnselectedView}>
<Text
style={styles.menuItemUnselected}
onPress={() => this.onScreen2Click()}
>
Screen 2
</Text>
</View>
</ScrollView>
);
}}
ref={"NAVDRAWER"}
>
<View>
<Text> Screen 1 </Text>
</View>
</DrawerLayoutAndroid>
); }
}
Screen2.js
export default class Screen2 extends Component<{}> {
static navigationOptions = {
header: null
};
onScreen1Click() {
this.refs["NAVDRAWER"].closeDrawer();
this.props.navigation.navigate("screen1");
}
onScreen2Click() {
this.refs["NAVDRAWER"].closeDrawer();
this.props.navigation.navigate("screen2");
}
render() {
return (
<DrawerLayoutAndroid
drawerWidth={300}
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() => {
return (
<ScrollView vertical={true}>
<View style={styles.drawerMenuSelectedView}>
<Text
style={styles.menuItemUnselected}
onPress={() => this.onScreen1Click()}
>
Screen 1
</Text>
</View>
<View style={styles.drawerMenuUnselectedView}>
<Text
style={styles.menuItemSelected }
onPress={() => this.onScreen2Click()}
>
Screen 2
</Text>
</View>
</ScrollView>
);
}}
ref={"NAVDRAWER"}
>
<View>
<Text> Screen 2 </Text>
</View>
</DrawerLayoutAndroid>
); }
}
App.js
import React, { Component } from 'react';
import { StackNavigator } from "react-navigation";
import Screen1 from "./Screen1";
import Screen2 from "./Screen2";
export default class App extends Component<Props> {
render() {
return (
<MyApp />
);
}
}
const MyApp = StackNavigator({
screen1: { screen: Screen1 },
screen2: { screen: Screen2 },
});