onPress()对我不起作用。我正在使用反应导航。我正在将createStackNavigator()与createBottomTabNavigator()一起使用。 onPress()在主页选项卡中运行,但在其他选项卡中不运行...
在主选项卡中,当我单击一个按钮时,它会转到其他选项卡props.navigation.navigate("Expenses")
。主页选项卡中的onPress起作用,但其他选项卡中不起作用。
其他标签
import { View, Text, StyleSheet, TouchableNativeFeedback } from "react-native"
class Expenses extends Component {
state = {
showing: false
}
handleClick = () => console.log("object")
render() {
return (
<TouchableNativeFeedback
style={styles.container}
onPress={() => {
this.handleClick()
}}
>
<View>
<Text>Hello world</Text>
</View>
</TouchableNativeFeedback>
)
}
}
Expenses.navigationOptions = {
headerTitle: "Expense",
headerTintColor: "#fff",
headerStyle: {
backgroundColor: "#EE3E54"
}
}
mainTabNavigation
import React from "react"
import { Platform, View } from "react-native"
import {
createStackNavigator,
createBottomTabNavigator
} from "react-navigation"
import TabBarIcon from "../components/TabBarIcon"
import HomeScreen from "../screens/HomeScreen"
import LinksScreen from "../screens/LinksScreen"
import SettingsScreen from "../screens/SettingsScreen"
import ExpensesScreen from "../screens/Expenses"
const config = Platform.select({
web: { headerMode: "screen" },
default: {}
})
//HeaderLeft Layout
const HeaderRight = props => {
return (
<View style={{ marginHorizontal: 16 }}>
<TabBarIcon
name="ios-paper-plane"
onPress={() => console.log("Pressed")}
/>
</View>
)
}
const HomeStack = createStackNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: {
headerTitle: "Plan",
headerRight: <HeaderRight />,
headerTintColor: "#fff",
headerStyle: {
backgroundColor: "#EE3E54"
}
}
},
Expenses: ExpensesScreen
},
config
)
HomeStack.navigationOptions = {
tabBarLabel: "Trans.",
tabBarOptions: {
activeTintColor: "#EE3E54"
},
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={
Platform.OS === "ios"
? `ios-information-circle${focused ? "" : "-outline"}`
: "ios-analytics"
}
/>
)
}
HomeStack.path = ""
const LinksStack = createStackNavigator(
{
Links: LinksScreen
},
config
)
LinksStack.navigationOptions = {
tabBarLabel: "Calendar",
tabBarOptions: {
activeTintColor: "#EE3E54"
},
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={Platform.OS === "ios" ? "ios-link" : "md-calendar"}
/>
)
}
LinksStack.path = ""
const SettingsStack = createStackNavigator(
{
Settings: SettingsScreen
},
config
)
SettingsStack.navigationOptions = {
tabBarLabel: "More",
tabBarOptions: {
activeTintColor: "#EE3E54"
},
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={Platform.OS === "ios" ? "ios-options" : "ios-more"}
/>
)
}
SettingsStack.path = ""
const tabNavigator = createBottomTabNavigator(
{
HomeStack,
LinksStack,
SettingsStack
},
{
navigationOptions: {
header: null
}
}
)
tabNavigator.path = ""
export default tabNavigator
onPress不会在其他选项卡中唤醒,而是在主选项卡中工作。.