Jak używać nawigatora z reagującym rodzimym menu bocznym?

Question

native bocznego menu tutaj jest mój kod:

/** 
* Sample React Native App 
* https://github.com/facebook/react-native 
*/ 

var React = require('react-native'); 
var SideMenu = require('react-native-side-menu'); 
var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    Navigator, 
} = React; 

var ContentView = React.createClass({ 
    render: function() { 
    return (
     <View style={styles.container}> 
     <Text style={styles.welcome}> 
      Welcome to React Native! 
     </Text> 
     </View> 
    ); 
    } 
}); 

var TestView = React.createClass({ 
    render: function() { 
    return (
     <View style={styles.container}> 
     <Text style={styles.welcome}> 
      Welcome to another page. 
     </Text> 
     <Text style={styles.instructions}> 
      Testing react native side menu with navigator. 
     </Text> 
     </View> 
    ); 
    } 
}); 

var Menu = React.createClass({ 
    about: function() { 
    this.props.menuActions.close(); 
    this.props.navigator.push({ 
     component: TestView, 
     title: 'Test View', 
    }); 
    }, 

    render: function() { 
    return (
     <View style={styles.sidemenu}> 
     <Text style={styles.paddingMenuItem}>Menu</Text> 
     <Text onPress={this.about} style={styles.paddingMenuItem}>About</Text> 
     </View> 
    ); 
    } 
}); 

var FindWisely = React.createClass({ 
    render: function() { 
    return (
     <Navigator 
     initialRoute={{ 
     component: Something, 
     title: 'Something', 
     }} 
     configureScene={() => { 
     return Navigator.SceneConfigs.FadeAndroid; 
     }} 
     renderScene={(route, navigator) => { 
     if(route.component) { 
      return React.createElement(route.component, { navigator }); 
     } 
     }}/> 
    ); 
    } 
}); 

var Something = React.createClass({ 
    render: function() { 
    var menu = <Menu navigator={this.props.navigator}/>; 
    return (
     <SideMenu menu={menu}> 
     <ContentView/> 
     </SideMenu> 
    ); 
    } 
}); 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
    welcome: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10, 
    }, 
    sidemenu: { 
    paddingTop: 50, 
    }, 
    paddingMenuItem: { 
    padding: 10, 
    }, 
}); 

module.exports = FindWisely; 

Gdy uruchomię to ja dostaję:

błąd niezdefiniowany nie jest obiektem (oceny „this.props.menuActions.close „)

Answer 1

w latest release of react-native-side-menu autor ogłosił, że dalszy przełączane z wykorzystaniem rekwizytów dla menuActions do kontekstu. Możesz przeczytać to w uwagach do wydania, a on nawet daje an example.

W twoim przypadku należy zmienić następujące bezpośrednio w kodzie:

Dodaj contextTypes do klasy Menu.

Menu.contextTypes = { 
    menuActions: React.PropTypes.object.isRequired 
}; 

W swojej onPress metoda dostępu to tak:

this.context.menuActions.close(); 

Answer 2

menuActions jest niezdefiniowane w niniejszym przypadku. Aby to naprawić, można przekazać go jako rekwizyty z komponentu kompozytowego <Menu />.

przykład: var menu = <Menu navigator={this.props.navigator} menuActions={menuActions}/>;

gdzie menuActions należy określić funkcję close.

Opcjonalnie można użyć isOpen, aby przełączać menu boczne ze stanem.

Użyj <SideMenu menu={menu} isOpen={this.state.isOpen}> i zamień this.props.menuActions.close() na this.setState({isOpen: false}), aby zamknąć menu boczne.