我正在尝试从标题按钮导航,但我不能,因为找不到导航变量。
这是我的代码
export const createRootNavigator = (signedIn = false) => {
return StackNavigator(
{
SignedIn: {
screen: SignedIn,
navigationOptions: {
gesturesEnabled: false,
headerStyle,
headerTintColor: "white",
headerTitleStyle,
headerLeft: null,
headerRight: <TouchableOpacity style={ [{paddingHorizontal:15}] }
onPress={() => navigation.navigate({ routeName: 'Notification'})}>
<Icon
name="md-notifications-outline"
size={26}
style={{ color: "white" }}/>
</TouchableOpacity>,
}
},
SignedOut: {
screen: SignedOut,
navigationOptions: {
gesturesEnabled: false
}
},
Notification: {
screen: Notification,
navigationOptions: {
gesturesEnabled: false
}
}
},
{
mode: "modal",
initialRouteName: signedIn ? "SignedIn" : "SignedOut"
}
);
};
我尝试声明导航变量,但它不起作用
屏幕截图
感谢。
答案 0 :(得分:3)
您需要将其添加到静态navigationOptions函数中,如下所示:
static navigationOptions = ({ navigation }) => {
return {
headerRight: <TouchableOpacity style={ [{paddingHorizontal:15}] }
onPress={() => navigation.navigate({ routeName: 'Notification'})}>
<Icon
name="md-notifications-outline"
size={26}
style={{ color: "white" }}/>
</TouchableOpacity>,
... and so on
}
};
或者可能将您的收益更改为:
export const createRootNavigator = (signedIn = false, { navigation }) => {
希望这有帮助!
答案 1 :(得分:0)
import {Button ,TouchableOpacity,Image} from 'react-native';
import {createMaterialTopTabNavigator} from 'react-navigation-tabs';
const AppTabNavigator = createMaterialTopTabNavigator(
{
AlertDetails: AlertDetails,
Comments: Comments,
},
{
navigationOptions:{
title:"Alert Details",
headerRight: <TouchableOpacity style={ [{paddingHorizontal:15}] }
onPress={() => alert('Three Dot Icon') }>
<Image
style={{height: 20, width :30,marginTop:10 ,marginLeft:30,marginRight:10 , justifyContent: 'center'}}
resizeMode="contain"
source={require('../assets/icons/three_dot.png')}>
</Image>
</TouchableOpacity>,
headerLeft: <Button style={{ marginRight:40, paddingRight:40,}} title=":" title=":" onPress={()=> alert('Left button 2')} />,
},
tabBarOptions: {
activeTintColor: 'white',
showIcon: false,
showLabel:true,
style: {
backgroundColor: colorTheme,
// borderTopWidth: 3,
// borderTopColor:'#465456'
},
indicatorStyle: {
backgroundColor: 'blue',
height : 2,
},
},
}
);