Render-Funktionen funktionieren nicht für Sidebar

Question

Ich bin auf https://www.npmjs.com/package/react-native-sidebar folgen, um eine Sidebar zu implementieren. I'm getting this error nach der Aktualisierung meines iOS Simulators. Ich folgte den Anweisungen, wie es ist, aber in meinem WebStorm IDE sagt es Unresolved function or method renderLeftSideBar() und Unresolved function or method renderLeftSideBar().

Hier ist der Code:

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

Ihre Klasse dapp renderLeftSideBar() keine Funktion haben; Deshalb ist Ihre Funktion unresolved.

Um dies zu beheben, müssen Sie eine Funktion renderLeftSideBar() erstellen, die den Inhalt für die linke Seitenleiste zurückgibt. Das Lesen der von Ihnen verknüpften Dokumentation zeigt, dass leftSideBar vom Typ Component ist.

leftSidebar: Compontent

Typischerweise würde ich die Funktion oben render() definieren.

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