一个人APP 大概十几个页面,想拆分成十几个createClass独立JS文件,如何做



  • 一个人APP 大概十几个页面,想拆分成十几个createClass独立JS文件,如何做

    每个JS一个createClass,每个JS一个页面

    var React = require('react-native');

    var {
    AppRegistry,
    View,
    Navigator,
    Text,
    BackAndroid,
    StyleSheet
    } = React;

    var Tabs = require('react-native-tabs');

    var SampleApp = React.createClass({

    configureScene(route){
        return Navigator.SceneConfigs.FadeAndroid;
    },
    
    renderScene(router, navigator){
        var Component = null;this._navigator = navigator;
        switch(router.name){
            case "welcome":
                Component = WelcomeView;
                break;
            case "feed":
                Component = FeedView;
                break;
            default: //default view
                Component = DefaultView;
        }
    
        return <Component navigator={navigator} />
    },
    
    componentDidMount() {
        var navigator = this._navigator;
        BackAndroid.addEventListener('hardwareBackPress', function() {
            if (navigator && navigator.getCurrentRoutes().length > 1) {
                navigator.pop();
                return true;
            }
            return false;
        });
    },
    
    
    componentWillUnmount() {
        BackAndroid.removeEventListener('hardwareBackPress');
    },
    
    render() {
        return (
    
            <Navigator
                initialRoute={{name: 'welcome'}}
                configureScene={this.configureScene}
                renderScene={this.renderScene} />
        );
    }
    

    });

    var FeedView = React.createClass({
    goBack(){
    this.props.navigator.push({name:"default"});
    },

    render() {
        return (
            <View >
                <Text onPress={this.goBack} >
                    I am Feed View! Tab to default view!
                </Text>
            </View>
        )
    }
    

    });

    var DefaultView = React.createClass({

    render(){
        return (
            <View >
                <Text >Default view</Text>
            </View>
        )
    }
    

    });

    var WelcomeView = React.createClass({
    onPressFeed() {
    this.props.navigator.push({name: 'feed'});
    },

    render() {
        var self = this;
        return (
            <View style={styles.container} >
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
                <Text style={styles.instructions} onPress={this.onPressFeed}>
                    Selected
                </Text>
                <Tabs selected="second" style={{backgroundColor:'white'}}
                      onSelect={function(el){self.setState({page: el.props.name});return {style:{color:'red'}}}}>
                    <Text name="first">First</Text>
                    <Text name="second">Second</Text>
                    <Text name="third">Third</Text>
                    <Text name="fourth">Fourth</Text>
                    <Text name="fifth">Fifth</Text>
                </Tabs>
            </View>
        );
    }
    

    });
    var styles = StyleSheet.create({
    container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    },
    welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    },
    instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
    },
    });

    AppRegistry.registerComponent('AwesomeProject', () => SampleApp);


  • administrators

    学习这里的“引用”和“导出”,建议使用export和import搭配即可
    http://bbs.react-native.cn/topic/15/react-react-native-的es5-es6写法对照表


登录后回复