我如何在此 React 导航设置中使用 contentComponent
How do I use contentComponent in this React naviagtion setup
我正在创建一个 react-native 应用程序,我正在使用 react-navigation 进行导航。我正在尝试使用以下代码获得正常的抽屉行为。
我已经尝试实现一个自定义抽屉组件,但似乎我没有正确地实现它。
如何使用 contentComponent 来实现这一点。
尝试的 DrawerContent 不工作。
import React, {Component} from 'react';
import { AppLoading } from 'expo';
import * as Font from 'expo-font';
import {Ionicons} from '@expo/vector-icons';
import { AppRegistry,View, Image, TouchableOpacity,Text} from 'react-native';
import FirstScreen from './src/FirstScreen';
import MapScreen from './src/MapScreen';
import Screen1 from './src/Screen1';
import Screen2 from './src/Screen2';
import Screen3 from './src/Screen3';
import {
createDrawerNavigator,
createStackNavigator,
createAppContainer,
} from 'react-navigation';
const FirstActivity_StackNavigator = createStackNavigator({
First: {
screen: Screen1,
navigationOptions: ({ navigation }) => ({
title: 'Demo Screen 1',
headerLeft: <App navigationProps={navigation} />,
}),
},
});
const Screen2_StackNavigator = createStackNavigator({
Second: {
screen: Screen2,
navigationOptions: ({ navigation }) => ({
title: 'Demo Screen 2',
headerLeft: <App navigationProps={navigation} />
}),
},q
});
const Screen3_StackNavigator = createStackNavigator({
Third: {
screen: Screen3,
navigationOptions: ({ navigation }) => ({
title: 'Demo Screen 3',
headerLeft: <App navigationProps={navigation} />,
}),
},
});
const DrawerContent = (props) =>(
<View>
<View
style={{
backgroundColor:'#f50057',
height:140,
alignItems:'center',
justifyContent: 'center'
}}>
<Text style={{color: 'white',fontSize:30}}>
Header
</Text>
</View>
<DrawerItems />
</View>
)
const DrawerNavigatorExample = createDrawerNavigator({
Screen1: {
screen: FirstActivity_StackNavigator,
navigationOptions: {
drawerLabel: 'Home',
},
},
Screen2: {
screen: Screen2_StackNavigator,
navigationOptions: {
drawerLabel: 'Get Location',
},
},
Screen3: {
screen: Screen3_StackNavigator,
navigationOptions: {
drawerLabel: 'Exit',
},
}
},{
contentComponent: DrawerContent,
});
class App extends Component{
constructor(props){
super(props);
this.state = {
isReady: false
}
}
toggleDrawer = () => {
this.props.navigationProps.toggleDrawer();
};
async componentDidMount(){
await Font.loadAsync({
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
}).then((err) =>{
this.setState({ isReady: true });
})
}
render(){
if(!this.state.isReady){
return(
<AppLoading/>
)
}
return(
<View style={{ flexDirection: 'row',marginLeft:10 }}>
<TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
<Text style={{color:"#000",fontSize:20}}>Menu</Text>
</TouchableOpacity>
</View>
)
}
}
export default createAppContainer(DrawerNavigatorExample);
你可以试试这个
const DrawerNavigatorExample = createDrawerNavigator({
Screen1: {
screen: FirstActivity_StackNavigator,
navigationOptions: {
drawerLabel: 'Home',
},
},
Screen2: {
screen: Screen2_StackNavigator,
navigationOptions: {
drawerLabel: 'Get Location',
},
},
Screen3: {
screen: Screen3_StackNavigator,
navigationOptions: {
drawerLabel: 'Exit',
},
}
},{
contentComponent: props => DrawerContent(props),
});
我正在创建一个 react-native 应用程序,我正在使用 react-navigation 进行导航。我正在尝试使用以下代码获得正常的抽屉行为。 我已经尝试实现一个自定义抽屉组件,但似乎我没有正确地实现它。
如何使用 contentComponent 来实现这一点。
尝试的 DrawerContent 不工作。
import React, {Component} from 'react';
import { AppLoading } from 'expo';
import * as Font from 'expo-font';
import {Ionicons} from '@expo/vector-icons';
import { AppRegistry,View, Image, TouchableOpacity,Text} from 'react-native';
import FirstScreen from './src/FirstScreen';
import MapScreen from './src/MapScreen';
import Screen1 from './src/Screen1';
import Screen2 from './src/Screen2';
import Screen3 from './src/Screen3';
import {
createDrawerNavigator,
createStackNavigator,
createAppContainer,
} from 'react-navigation';
const FirstActivity_StackNavigator = createStackNavigator({
First: {
screen: Screen1,
navigationOptions: ({ navigation }) => ({
title: 'Demo Screen 1',
headerLeft: <App navigationProps={navigation} />,
}),
},
});
const Screen2_StackNavigator = createStackNavigator({
Second: {
screen: Screen2,
navigationOptions: ({ navigation }) => ({
title: 'Demo Screen 2',
headerLeft: <App navigationProps={navigation} />
}),
},q
});
const Screen3_StackNavigator = createStackNavigator({
Third: {
screen: Screen3,
navigationOptions: ({ navigation }) => ({
title: 'Demo Screen 3',
headerLeft: <App navigationProps={navigation} />,
}),
},
});
const DrawerContent = (props) =>(
<View>
<View
style={{
backgroundColor:'#f50057',
height:140,
alignItems:'center',
justifyContent: 'center'
}}>
<Text style={{color: 'white',fontSize:30}}>
Header
</Text>
</View>
<DrawerItems />
</View>
)
const DrawerNavigatorExample = createDrawerNavigator({
Screen1: {
screen: FirstActivity_StackNavigator,
navigationOptions: {
drawerLabel: 'Home',
},
},
Screen2: {
screen: Screen2_StackNavigator,
navigationOptions: {
drawerLabel: 'Get Location',
},
},
Screen3: {
screen: Screen3_StackNavigator,
navigationOptions: {
drawerLabel: 'Exit',
},
}
},{
contentComponent: DrawerContent,
});
class App extends Component{
constructor(props){
super(props);
this.state = {
isReady: false
}
}
toggleDrawer = () => {
this.props.navigationProps.toggleDrawer();
};
async componentDidMount(){
await Font.loadAsync({
Roboto: require('native-base/Fonts/Roboto.ttf'),
Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
}).then((err) =>{
this.setState({ isReady: true });
})
}
render(){
if(!this.state.isReady){
return(
<AppLoading/>
)
}
return(
<View style={{ flexDirection: 'row',marginLeft:10 }}>
<TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
<Text style={{color:"#000",fontSize:20}}>Menu</Text>
</TouchableOpacity>
</View>
)
}
}
export default createAppContainer(DrawerNavigatorExample);
你可以试试这个
const DrawerNavigatorExample = createDrawerNavigator({
Screen1: {
screen: FirstActivity_StackNavigator,
navigationOptions: {
drawerLabel: 'Home',
},
},
Screen2: {
screen: Screen2_StackNavigator,
navigationOptions: {
drawerLabel: 'Get Location',
},
},
Screen3: {
screen: Screen3_StackNavigator,
navigationOptions: {
drawerLabel: 'Exit',
},
}
},{
contentComponent: props => DrawerContent(props),
});