为什么我在iOS模拟器中遇到这个奇怪的错误?

时间:2017-07-17 03:26:58

标签: javascript ios reactjs react-native

我要做的是在我的应用中放置一个侧栏但是I'm getting this weird error

  

对象作为React子对象无效(找到:   带键的对象(flex,backgroundColor})。如果   你打算渲染一个孩子的集合,   改为使用数组   在视图中(在Animatedlmplementation.js:   184q)
  在AnimatedComponent中(在SidebarView.js   210)
  在RCTView(在View.js:133)
  在视图中(在SidebarView.js:2O3)
  在SidebarView中(在index.ios.js:48)
  在Bar(在index.ios.js:65)
  在提供者(在index.ios.js:6q)
  在DApp中(在renderApplication.js:35)
  在RCTView(在View.js:133)
  在视图中(在AppContainer.js:98)
  在RCTView(在View.js:133)
  在视图中(在AppContainer.js:97)

我知道react-redux <Provider/>组件期望其子prop成为单个ReactElement,因此我将所有内容包装在名为<Bar/>的单个组件中。

这是我的代码:

import React, { Component } from 'react';
import { AppRegistry, Text} from 'react-native';
import { Provider } from 'react-redux';
import Application from './pages/Application';
import store from './redux';
import api from './utilities/api';
import SideBar from 'react-native-sidebar';

export default class DApp extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            isLoading: true
        }
        console.log("something");
    }

    componentWillMount() {
        api.getData().then((res) => {
            this.setState({
                data: res.data
            })
        });
    }

    renderLeftSideBar() {
        return(
            <Text>Something here for left side bar!</Text>
        );
    }

    renderRightSideBar() {
        return(
            <Text>Something here for right side bar!</Text>
        );
    }

    renderContent() {
        return(
            <Text>The content!</Text>
        );
    }

    render() {
        const Bar = () => {
            return(
                <SideBar>
                    leftSideBar = {this.renderLeftSideBar()}
                    rightSideBar = {this.renderRightSideBar()}
                    style = {{flex: 1, backgroundColor: 'black'}}>{this.renderContent()}
                    <Application/>
                </SideBar>
            );
        }

        if(this.state.isLoading) {
            console.log("The data is: " + this.state.data);
        } else {
            console.log("Else got executed");
        }

        return (
            <Provider store={store}>
                <Bar/>
            </Provider>
        );
    }
}

AppRegistry.registerComponent('DApp', () => DApp);

3 个答案:

答案 0 :(得分:1)

在我看来,您的代码中存在拼写错误 - leftSideBarrightSideBarstyle属性与<SideBar>无关,因为您有额外的> - 我想如果你刚用过

        return(
            <SideBar
                leftSideBar = {this.renderLeftSideBar()}
                rightSideBar = {this.renderRightSideBar()}
                style = {{flex: 1, backgroundColor: 'black'}}>{this.renderContent()}
                <Application/>
            </SideBar>
        );

你可能很好

答案 1 :(得分:1)

leftSideBar,rightSideBar和style应该是SideBar组件的道具,如下所示:

<SideBar leftSideBar = {this.renderLeftSideBar()} rightSideBar = {this.renderRightSideBar()} style = {{flex: 1, backgroundColor: 'black'}}>{this.renderContent()}
                <Application/>
            </SideBar>

答案 2 :(得分:0)

Bar组件的定义不返回有效的JSX。尝试类似:

import { your other components ..., View } from 'react-native';

<SideBar>
  {this.renderLeftSideBar()}
  {this.renderRightSideBar()}
  <View style = {{flex: 1, backgroundColor: 'black'}}>
    {this.renderContent()}
  </View>
  <Application/>
</SideBar>