onPress()无法与反应导航一起使用

时间:2019-08-06 02:48:17

标签: javascript react-native react-navigation

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不会在其他选项卡中唤醒,而是在主选项卡中工作。.

0 个答案:

没有答案