React-Native 0.57.5 React Navigation 3 不工作

Question

您好，我创建了一个新应用。

• react-native init AwesomeProject
• cd AwesomeProject
• npm install --save react-navigation
• npm install --save react-native-gesture-handler
• react-native 链接
• react-native run-ios

每次都出错。如果有人有任何理想如何克服这个问题，那就太好了

TypeError: instance.render is not a function. (In 'instance.render()', 'instance.render' is undefined)

This error is located at:
    in ScreenContainer (at StackViewLayout.js:300)
    in RCTView (at View.js:45)
    in AnimatedComponent (at StackViewLayout.js:298)
    in Handler (at StackViewLayout.js:279)
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.js:96)
    in RCTView (at View.js:45)
    in Transitioner (at StackView.js:22)
    in StackView (at createNavigator.js:62)
    in Navigator (at createKeyboardAwareNavigator.js:12)
    in KeyboardAwareNavigator (at createAppContainer.js:388)
    in NavigationContainer (at renderApplication.js:34)
    in RCTView (at View.js:45)
    in RCTView (at View.js:45)
    in AppContainer (at renderApplication.js:33)

finishClassComponent
    index.bundle?platform=ios&dev=true&minify=false:16219:43
performUnitOfWork
    index.bundle?platform=ios&dev=true&minify=false:19455:27
workLoop
    index.bundle?platform=ios&dev=true&minify=false:19489:47
renderRoot
    index.bundle?platform=ios&dev=true&minify=false:19560:21
performWorkOnRoot
    index.bundle?platform=ios&dev=true&minify=false:20280:23
performWork
    index.bundle?platform=ios&dev=true&minify=false:20207:30
performSyncWork
    index.bundle?platform=ios&dev=true&minify=false:20183:20
requestWork
    index.bundle?platform=ios&dev=true&minify=false:20062:26
scheduleWork
    index.bundle?platform=ios&dev=true&minify=false:19934:22
scheduleRootUpdate
    index.bundle?platform=ios&dev=true&minify=false:20451:21
render
    index.bundle?platform=ios&dev=true&minify=false:20921:26
renderApplication
    index.bundle?platform=ios&dev=true&minify=false:68557:59
run
    index.bundle?platform=ios&dev=true&minify=false:68238:28
runApplication
    index.bundle?platform=ios&dev=true&minify=false:68288:28
__callFunction
    index.bundle?platform=ios&dev=true&minify=false:2470:49
<unknown>
    index.bundle?platform=ios&dev=true&minify=false:2243:31
__guard
    index.bundle?platform=ios&dev=true&minify=false:2424:15
callFunctionReturnFlushedQueue
    index.bundle?platform=ios&dev=true&minify=false:2242:21

package.json

{
  "name": "AwesomeProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.6.1",
    "react-native": "0.57.5",
    "react-native-gesture-handler": "^1.0.9",
    "react-navigation": "^3.0.0"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.49.2",
    "react-test-renderer": "16.6.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

app.js

// In App.js in a new project

import React from "react";
import { View, Text } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen
  }
});

export default createAppContainer(AppNavigator);

Answer 1

我在 Github 上为解决方案创建了一个示例。

https://github.com/WrathChaos/React-Navigation-v3-Example

首先，如果 React Native 版本 0.57.5 没有特殊用途的话。我建议将 RN 版本升级到最新（当前：0.59.3）

如果你不想查看 GitHub，这里是 App.js 示例代码:)

import React from "react";
import { Button, StyleSheet, Text, View } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Button
          title="HomeScreen"
          onPress={() => this.props.navigation.navigate("Player")}
        />
      </View>
    );
  }
}

class PlayerScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>PlayerScreen Screen</Text>
      </View>
    );
  }
}

const AppNavigator = createStackNavigator({
  Home: HomeScreen,
  Player: PlayerScreen
});

const MainNavigator = createAppContainer(AppNavigator);

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <MainNavigator />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    justifyContent: "center"
  }
});