Question

我在使用component class got object error时收到react-native-router-flux，这是我的index.js文件和组件文件。我正面临component object error，但如果我直接使用该组件作为标签，它运作良好。

index.js

import React from 'react';
import { Router ,Scene } from 'react-native-router-flux';
import GreenScreen from './GreenScreen';
import GrayScreen from './GrayScreen';

const App = () => {
  return (
    <Router>
      <Scene key="root">
        <Scene key="green" component="{ GreenScreen }" title="Green Screen" initial/>
        <Scene key="gray" component="{ GrayScreen }" title="Green Screen"/>
      </Scene>
    </Router>
  );
}

export default App;

GreenScreen.js

import React, { Component } from 'react';
import {
   StyleSheet,
   View,
   Text
} from 'react-native';
import { Actions } from 'react-native-router-flux';

const GreenScreen = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.welcome} onPress={ () => Actions.gray()}>
        Hello This is Green Screen !
        Click to Go to Gray Screen !
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#33691E',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: '#ffffff',
  }
});

export default GreenScreen;

GrayScreen.js

import React ,{ Component } from 'react';
import {
    StyleSheet,
    View,
    Text
} from 'react-native';
import { Actions } from 'react-native-router-flux';

const GrayScreen = () => {
    return (
        <View style={ styles.container }>
            <Text style={ styles.welcome } onPress={() => Actions.green()}>
             Hello This is Gray Screen !
             Click here to Move to Green Screen
            </Text>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
       backgroundColor: '#607D8B',
    },
    welcome: {
       fontSize: 20,
       textAlign: 'center',
       margin: 10,
       color: '#ffffff',
    }
});

export default GrayScreen;

感谢您的帮助！

Answer 1

发现问题是，您已将String传递给component中的Scenes而不是组件。在index.js

中更改以下代码

<Scene key="green" component="{ GreenScreen }" title="Green Screen" initial/>
<Scene key="gray" component="{ GrayScreen }" title="Green Screen"/>

到这个

<Scene key="green" component={ GreenScreen } title="Green Screen" initial/>
<Scene key="gray" component={ GrayScreen } title="Green Screen"/>

React Native Router Flux - 期望一个组件类，得到[object Object]

1 个答案: