Làm cách nào để sử dụng trình điều hướng có menu bên phản ứng gốc?

Question

bản địa-side-menu ở đây là mã của tôi:

/** 
* 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; 

Khi tôi chạy này tôi nhận được:

một lỗi không xác định không phải là một đối tượng (đánh giá 'this.props.menuActions.close ')

Answer 1

trong latest release of react-native-side-menu tác giả thông báo rằng anh đã chuyển từ sử dụng đạo cụ cho menuActions thành ngữ cảnh. Bạn có thể đọc nó trong ghi chú phát hành và thậm chí anh ta còn cho an example.

Trong trường hợp của bạn, bạn sẽ thay đổi ngay sau trong mã của bạn:

Thêm contextTypes đến lớp Menu.

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

Trong onPress bạn truy cập phương pháp đó như thế này:

this.context.menuActions.close(); 

Answer 2

menuActions là undefined trong trường hợp này. Để khắc phục điều này, bạn có thể truyền nó làm đạo cụ từ thành phần phức hợp <Menu />.

ví dụ: var menu = <Menu navigator={this.props.navigator} menuActions={menuActions}/>;

nơi menuActions nên xác định close chức năng.

tùy chọn, bạn có thể sử dụng isOpen để chuyển đổi menu bên với trạng thái.

Sử dụng <SideMenu menu={menu} isOpen={this.state.isOpen}> và thay thế this.props.menuActions.close() để đóng menu bên.