Question

如果你仔细地看了上面的代码，就可以看到，SlideMenu 组件接受两个属性：renderLeftView 和 renderCenterView。这两个函数调用时将返回可渲染的组件。

现在我们已经准备好在项目中使用 SlideMenu 组件了，它的使用和实现非常简单，代码如下：

app/LeftComponent.js



'use strict';
var React = require('react-native');
var {
    StyleSheet,
    Text,
    View,
} = React;

var LeftComponent = React.createClass({
    render: function() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>Left</Text>
            </View>
        );
    }
});
var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
});
module.exports = LeftComponent;

app/CenterComponent.js



'use strict';
var React = require('react-native');
var {
    StyleSheet,
    Text,
    View,
} = React;

var CenterComponent = React.createClass({
    render: function() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>Center</Text>
            </View>
        );
    }
});

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
});
module.exports = CenterComponent;