渲染功能不适用于侧边栏

Question

我正在按照https://www.npmjs.com/package/react-native-sidebar实施边栏。 刷新我的iOS模拟器时出现此错误 。 我按照指示进行操作，但是在WebStorm IDE它说的是Unresolved function or method renderLeftSideBar()和Unresolved function or method renderLeftSideBar() 。

这是代码：

import React, { Component } from 'react';
import { AppRegistry} 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>Someting here for left side bar!</Text>
    );
}

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

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

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

        return (

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

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

Answer 1

您的类DApp没有功能renderLeftSideBar() ; 这就是为什么您的功能unresolved 。

要解决此问题，您需要创建一个函数renderLeftSideBar() ，该函数返回左侧栏的内容。 阅读链接的文档后，将发现leftSideBar的类型为Component。

leftSidebar：组件

通常，我会在render()上render()函数。

renderLeftSideBar() {
    return <div>
        (content goes here)
    </div>
}