react-native - onPress 导航不导航

问题描述

我已通过另一个单独的 AppNavigator.js 文件将 StackNavigator 添加到应用程序中。尽管如此，该应用程序仍然无法导航，但可以编译。该按钮是可点击的，但没有任何动作。

不同版本的 Expo 和 React-Native 以及不同的 Navigation 插件。

这是 AppNavigator.js 的副本

import { StackNavigator } from 'react-navigation';
import Timer from './Timer';
import Main from './Main';
import Splash from './Splash';

const AppNavigator = StackNavigator({
    Timer: {
      screen: Timer
    },
    Splash: {
      screen: Splash
    },
    Main: {
      screen: Main
    }
})
export default AppNavigator;

这是我的 package.json

    { 
      "name": "app",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-native-scripts": "1.13.1",
    "jest-expo": "26.0.0",
    "react-test-renderer": "16.3.0-alpha.1"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "node node_modules/jest/bin/jest.js"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "expo": "26.0.0",
    "react": "16.3.0-alpha.1",
    "lodash": "^4.17.4",
    "react-native": "0.54.0",
    "react-navigation": "1.2.1",
    "@builderx/tab-view": "^0.1.5",
    "@builderx/icons": "^0.1.5",
    "@builderx/utils": "^0.1.6",
    "@builderx/react-native-swiper": "^0.1.5"
  }
}

这里也是负责导航的 Button 的副本：

import React, { Component } from "react";
import { Center } from "@builderx/utils";
import Button13 from "../symbols/button13";
import Button5 from "../symbols/button5";
import { createAppContainer } from 'react-navigation';
import { View, StyleSheet, Text, Image } from "react-native";

export default class Timer extends Component {
  render() {
    return (
      <View style={styles.root}>
        <Button13 style={styles.button13} />
        <Center horizontal>
          <Button5
            style={styles.button5}
            onPress={() => {
              alert("hello");
              this.props.navigation.navigate("Main");
            }}
          />
        </Center>
        <Center horizontal>
          <Image
            source={require("../assets/capture.jpg")}
            style={styles.image}
          />
        </Center>
        <View style={styles.rect}>
          <Text style={styles.text}>[Meditation Name]</Text>
          <Text style={styles.text2}>00:00</Text>
        </View>
      </View>
    );
  }
}

标签： react-native

react-native - onPress 导航不导航

问题描述

解决方案

推荐阅读