onPress导航未导航

Question

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

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

这是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>
    );
  }
}

Answer 1

首先。

不建议使用StackNavigator，请改用React-Navigation3.0中的createStackNavigator

第二

请显示按钮代码，您应该调用类似于this.props.navigation.navigate('Main')的代码

Answer 2

该按钮不能访问导航道具，并且您不能拥有指向自定义组件的onPress。将下面的代码添加到按钮文件中，然后像这样将其添加到按钮中，然后在该组件的嵌套按钮上调用this.props.navigation.navigate("Main")；

import { withNavigation } from 'react-navigation';

export default withNavigation(Button5)