on按导航不导航

Question

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

不同版本的世博会和反应原生以及不同的导航插件。

下面是 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;

这是我的包.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"
  }
}

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

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

First .

Don's 使用 StackNavigator ，

已被弃用，改用 React-navigation 3.0 中的 createStackNavigator

第二

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

Answer 2

该按钮无法访问导航道具，并且您无法将 onPress 添加到自定义组件。 将下面的代码添加到按钮文件中，然后像这样将其添加到按钮中，然后只需调用this.props.navigation.navigate（"Main"）; 在该组件的嵌套按钮上

import { withNavigation } from 'react-navigation';
export default withNavigation(Button5)