React-Native-Navigation：未定义已使用但尚未注册

Question

我正在尝试使用 react-native 和 react-native-navigation 创建一个简单的应用程序。我已经下载并使用了 repo 中的示例，试图查看问题出在哪里，并查看了使用指南，但一切似乎都正常..

但是当应用程序启动时会产生以下错误：

Navigation.getRegisteredScreen: undefined 使用但尚未注册。

我看过屏幕注册，但它的实现与示例或使用指南中的没有区别..

版本信息：

"react": "16.0.0-alpha.6",
"react-native": "0.43.0",
"react-native-elements": "^0.10.3",
"react-native-navigation": "^1.0.30",
"react-native-vector-icons": "^4.0.0"

目前我正在构建 Android 而不是 iOS，代码如下。欢迎任何指点：

index.android.js

import App from './src/app';

app.js

import {
    Platform
} from 'react-native';
import {Navigation} from 'react-native-navigation';

//Screen related book keeping
import {registerScreens} from './screens';
registerScreens();

//Create and store tab reference for use within Navigation constructor
const createTabs = () => {
    let tabs = [
        {
            label: 'One',
            screens: 'TestApp.HomeScreen',
            icon: require('../img/one.png'),
            selectedIcon: require('../img/one_selected.png'),
            title: 'Home'
        },
        {
            label: 'Two',
            screens: 'TestApp.CodeScreen',
            icon: require('../img/two.png'),
            selectedIcon: require('../img/two_selected.png'),
            title: 'Codes'
        },
    ];
    return tabs;
};
//this will start the app
Navigation.startTabBasedApp({
    tabs: createTabs(),
    tabsStyle: {
        tabBarBackgroundColor: '#0f2362',
        tabBarButtonColor: '#ffffff',
        tabBarSelectedButtonColor: '#63d7cc'
    },
    appStyle: {
        orientation: 'portrait'
    },
});

/src/screens/index.android.js

import { Navigation } from 'react-native-navigation';
import HomeScreen from './HomeScreen';
import CodeScreen from './CodeScreen';

// register all screens of the app (including internal ones)
export function registerScreens () {
  Navigation.registerComponent('TestApp.HomeScreen', () => HomeScreen);
  Navigation.registerComponent('TestApp.CodeScreen', () => CodeScreen);
}

/src/screens/CodeScreen.js

import React, { Component } from 'react';
import {
  Text,
  View,
  ScrollView,
  TouchableOpacity,
  StyleSheet,
  Alert
} from 'react-native';
import { Navigation, Screen } from 'react-native-navigation';

export default class CodeScreen extends Component {
      constructor(props) {
    super(props);
  }

  render() {
    return (
      <View style={styles.container}>

        <TouchableOpacity>
          <Text style={styles.button}>Change Buttons</Text>
        </TouchableOpacity>

        <TouchableOpacity>
          <Text style={styles.button}>Change Title</Text>
        </TouchableOpacity>

        <TouchableOpacity>
          <Text style={styles.button}>Switch To Tab#1</Text>
        </TouchableOpacity>

        <TouchableOpacity>
          <Text style={styles.button}>Set Tab Badge</Text>
        </TouchableOpacity>

        <TouchableOpacity>
          <Text style={styles.button}>Toggle Tabs</Text>
        </TouchableOpacity>

      </View>
    );
  }
 }

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: 'white'
  },
  button: {
    textAlign: 'center',
    fontSize: 18,
    marginBottom: 10,
    marginTop:10,
    color: 'blue'
  }
});

/src/screens/HomeScreen.js

import React, { Component } from 'react';
import {
  Text,
  View,
  TouchableOpacity,
  StyleSheet,
  Alert,
  Platform
} from 'react-native';
import { Navigation, Screen } from 'react-native-navigation';

export default class HomeScreen extends Component {
  constructor(props) {
    super(props);
    // if you want to listen on navigator events, set this up
  }

  render() {
    return (
      <View style={{flex: 1, padding: 20}}>
        <TouchableOpacity>
          <Text style={styles.button}>Push Plain Screen</Text>
        </TouchableOpacity>

        <TouchableOpacity>
          <Text style={styles.button}>Push Styled Screen</Text>
        </TouchableOpacity>

        <TouchableOpacity>
          <Text style={styles.button}>Show Modal Screen</Text>
        </TouchableOpacity>

        {
          Platform.OS === 'ios' ?
            <TouchableOpacity>
              <Text style={styles.button}>Show LightBox</Text>
            </TouchableOpacity> : false
        }

        {
          Platform.OS === 'ios' ?
            <TouchableOpacity>
              <Text style={styles.button}>Show In-App Notification</Text>
            </TouchableOpacity> : false
        }

        <TouchableOpacity>
          <Text style={styles.button}>Show Single Screen App</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  button: {
    textAlign: 'center',
    fontSize: 18,
    marginBottom: 10,
    marginTop: 10,
    color: 'blue'
  }
});

Answer 1

您使用了错误的密钥来指定 screen。在您的代码中：

const createTabs = () => {
  let tabs = [{
      label: 'One',
      screens: 'TestApp.HomeScreen',
      icon: require('../img/one.png'),
      selectedIcon: require('../img/one_selected.png'),
      title: 'Home'
    },
    {
      label: 'Two',
      screens: 'TestApp.CodeScreen',
      icon: require('../img/two.png'),
      selectedIcon: require('../img/two_selected.png'),
      title: 'Codes'
    },
  ];
  return tabs;
};

不要使用 screens，而是将其替换为 screen。

React-Native-Navigation：未定义已使用但尚未注册

React-Native-Navigation: undefined used but not yet registered

javascript

android

react-native

velo

react-native-navigation