作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个抽屉导航器,里面有 2 个堆栈。我希望每个堆栈的第一个屏幕在标题中显示汉堡包图标,但是当移动到堆栈中的第二个屏幕时,我希望汉堡包被替换为后退按钮。
我如何将抽屉连接到这个切换按钮并让它只显示在堆栈中的第一个屏幕上?
当我在堆栈中编辑我的第一个屏幕以包含切换按钮时,我没有得到任何响应。我遵循了
中详述的过程Add hamburger button to React Native Navigation
这是我最好的尝试:
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import { createStackNavigator, createDrawerNavigator, createAppContainer } from 'react-navigation';
/----------------屏幕---------------------/
class FirstScreen extends React.Component {
static navigationOptions = function(props) {
return {
title: '',
headerLeft: <Button onPress={() => props.navigation.navigate('DrawerNavigator')} title= "=" />
}
};
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor:'teal' }}>
<Text style={styles.text}>FirstScreen</Text>
<Button
title="Next"
onPress={() => this.props.navigation.navigate('Second')}
/>
</View>
);
}
}
class SecondScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent:
'center', backgroundColor:'pink' }}>
<Text>Second Screen</Text>
<Button
title="Next"
onPress={() => this.props.navigation.navigate('Third')}
/>
</View>
);
}
}
class ThirdScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center", backgroundColor:'coral' }}>
<Text>Third Screen</Text>
<Button
title="Next"
onPress={() => this.props.navigation.navigate('First')}
/>
</View>
);
}
}
class FourthScreen extends React.Component {
static navigationOptions = function(props) {
return {
title: '',
headerLeft: <Button onPress={() => props.navigation.navigate('DrawerNavigator')} title= "=" />
}
};
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor:'orange' }}>
<Text style={styles.text}>4th Screen</Text>
<Button
title="Next"
onPress={() => this.props.navigation.navigate('Fifth')}
/>
</View>
);
}
}
class FifthScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent:
'center', backgroundColor:'purple' }}>
<Text>5th Screen</Text>
<Button
title="Next"
onPress={() => this.props.navigation.navigate('Sixth')}
/>
</View>
);
}
}
class SixthScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center", backgroundColor:'lightblue' }}>
<Text>6th Screen</Text>
<Button
title="Next"
onPress={() => this.props.navigation.navigate('Fourth')}
/>
</View>
);
}
}
/----------------堆栈导航器------------/
const StackNavigator1 = createStackNavigator({
First: {screen: FirstScreen},
Second: {screen: SecondScreen},
Third: {screen: ThirdScreen}
});
const StackNavigator2 = createStackNavigator({
Fourth: {screen: FourthScreen},
Fifth: {screen: FifthScreen},
Sixth: {screen: SixthScreen}
});
/----------------抽屉导航器------------/
const DrawerNavigator = createDrawerNavigator(
{
StackNavigator1: {
screen: StackNavigator1
},
StackNavigator2: {
screen: StackNavigator2
}
}
);
export default createAppContainer(DrawerNavigator);
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
最佳答案
你可以尝试做这样的事情
将自定义组件作为标题标题添加到每个第一个堆栈导航器
const LogoTitle = props => {
return (
<TouchableOpacity
style={{flexDirection: 'row'}}
onPress={() => navigation.dispatch(DrawerActions.openDrawer())}>
<Entypo name={'menu'} size={25} color={'black'} />
<Text style={{fontSize: 18, fontWeight: '400', marginLeft: 10}}>
Home
</Text>
</TouchableOpacity>
);
};
<Stack.Screen
options={{
headerTitle: props => <LogoTitle {...props} />,
}}
name={'Home'}
component={HomeScreen}
/>
您将获得导航对象作为堆栈导航器的 Prop 。
希望它能提供一些想法。
关于react-navigation - 如何在嵌套的抽屉/堆栈导航中包含 menuIcon 以切换 drawerNavigator?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55735710/
我正在尝试构建 IconMenu在 AppBar 组件上。我正在使用 create-react-app 构建我的项目. 我的代码看起来像 index.js import React from 'rea
我有一个抽屉导航器,里面有 2 个堆栈。我希望每个堆栈的第一个屏幕在标题中显示汉堡包图标,但是当移动到堆栈中的第二个屏幕时,我希望汉堡包被替换为后退按钮。 我如何将抽屉连接到这个切换按钮并让它只显示在
我是一名优秀的程序员,十分优秀!