我正在React Native中创建一个应用程序,我正在使用React Navigation 5.x,并且用我创建的默认头替换了默认头,这是代码的一部分:
App.js
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home" drawerContent={SideMenu} drawerStyle={{
backgroundColor: '#fff',
width: Dimensions.get('window').width - 120,
}}>
<Drawer.Screen name="Home" component={StackNav} />
</Drawer.Navigator>
</NavigationContainer>
StackNav.js
<Stack.Navigator headerMode="float" screenOptions={{
cardShadowEnabled: false,
cardOverlayEnabled:false,
headerTransparent: true,
headerBackTitleVisible: false,
gestureEnabled: true,
headerTintColor: currentTheme.colors.primary,
headerTitleStyle: styles.headerTitle,
gestureDirection:"horizontal",
headerStyleInterpolator: HeaderStyleInterpolators.forStatic,
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
header: ({ scene, previous, navigation }) => {
const { options } = scene.descriptor;
const title =
options.headerTitle !== undefined
? options.headerTitle
: options.title !== undefined
? options.title
: scene.route.name;
return (
<MyHeader click={() => addCart()} ref={myRef} scene={scene} onPress={navigation.goBack} navigation={navigation}/>
);
}
}}>
<Stack.Screen name="Home" component={Home} options={{title: 'Home'}}/>
<Stack.Screen name="Menu" component={RestaurantMenu} options={({ route }) => ({ title: route.params.name })}/>
<Stack.Screen name="Piatti" component={MenuItems} options={({ route }) => ({ title: route.params.name })}/>
<Stack.Screen name="Carrello" component={Cart} options={({ route }) => ({ title: route.params.name })}/>
</Stack.Navigator>
MyHeader.js
import * as React from 'react';
import { StyleSheet, Button, SafeAreaView, TouchableOpacity, Image,View, Text } from 'react-native';
const styles = StyleSheet.create({
containerSafe: {
flex: 1,
flexDirection:"row",
justifyContent: "space-between"
},
containerLeft: {
zIndex: 1,
alignSelf: 'flex-start',
left: 0,
marginTop:25,
marginLeft:10,
width: 25,
height: 25,
justifyContent: 'center',
alignContent: 'center'
},
containerCenter: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
containerRight: {
zIndex: 1,
alignSelf: 'flex-end',
right: 0,
marginTop:25,
marginRight:10,
width: 25,
height: 25,
justifyContent: 'center',
alignContent: 'center'
}
});
class CartButton extends React.Component {
constructor(props) {
super(props);
}
render(){
return (
<TouchableOpacity onPress={() => this.props.onPress()} style={styles.containerRight}>
<Image style={{width:"100%", height:"100%"}}
source={require('../assets/cart.png')}
/>
<Text>{this.props.nCart}</Text>
</TouchableOpacity>
)
}
}
class HomeButton extends React.Component {
constructor(props) {
super(props);
}
render(){
return (
<TouchableOpacity onPress={() => this.props.onPress()} style={styles.containerLeft}>
<Image style={{width:"100%", height:"100%"}}
source={require('../assets/menu.png')}
/>
</TouchableOpacity>
)
}
}
class BackButton extends React.Component {
constructor(props) {
super(props);
}
render(){
return (
<TouchableOpacity onPress={() => this.props.onPress()} style={styles.containerLeft}>
<Image style={{width:"100%", height:"100%"}}
source={require('../assets/leftArrow.png')}
/>
</TouchableOpacity>
)
}
}
class MyHeader extends React.Component {
constructor(props) {
super(props);
this.state= {
nCart: 0
}
this.addCart = this.addCart.bind(this);
}
addCart(){
var current = this.state.nCart;
this.setState({
nCart: current +1
})
}
render(){
return(
<SafeAreaView style={styles.containerSafe}>
{(this.props.scene.route.name === "Home")? <HomeButton onPress={() =>this.props.navigation.openDrawer()} /> : <BackButton onPress={() => this.props.navigation.goBack()} />}
<Button title="click" onPress={(() => this.props.click())} />
<CartButton nCart={this.state.nCart} onPress={() => this.props.navigation.navigate('Carrello', {name: 'Carrello'})} />
</SafeAreaView>
)
}
}
export default MyHeader;
但是它给了我这个问题
当我切换屏幕时,“后退”按钮和“购物车”按钮重叠,但是汉堡菜单应该消失并成为“后退”按钮的箭头,而购物车应该像在家里一样在柜台中简单地更新。
[使用自定义标题时,建议将导航器上的headerMode
道具设置为screen
,这样就不必实现动画。如果您希望自定义标题与屏幕过渡保持动画效果,并希望将
headerMode
保持为float
,则可以在scene.progress.current
和scene.progress.next
道具上进行插值。
const progress = Animated.add(scene.progress.current, scene.progress.next || 0);
const opacity = progress.interpolate({
inputRange: [0, 1, 2],
outputRange: [0, 1, 0],
});
return (
<Animated.View style={{ opacity }}><MyHeader click={() => addCart()} ref={myRef} scene={scene} onPress={navigation.goBack} cartElement={cart} navigation={navigation}/></Animated.View>
);