求一点关于Navigator的简单实例代码



  • 官方文档上的实例掐头去尾的看不懂啊:disappointed:



  • 看下mot写的教程



  • 晴明说他写的东西有些错误
    事实上我按他的代码也确实运行不了:anguished:



  • 今天我又自己解决了这个问题:laughing:
    先把代码拿出来看看:

    //index.ios.js
    /**

    var React = require('react-native');
    var {
    AppRegistry,
    StyleSheet,
    Image,
    Text,
    View,
    AlertIOS,
    Navigator,
    TouchableHighlight,
    } = React;

    var FirstPageComponent = require('./FirstPageComponent');

    var AwesomeProject = React.createClass({

    render: function() {
    var defaultName = 'FirstPageComponent';
    var defaultComponent = FirstPageComponent;
    return (
    <Navigator

          initialRoute={{ name: defaultName, component: defaultComponent }}
          configureScene={() => {
            return Navigator.SceneConfigs.VerticalDownSwipeJump;
          }}
          renderScene={(route, navigator) => {
            let Component = route.component;
            if(route.component) {
              return <Component {...route.params} navigator={navigator} />
            }
          }} />
        );
    

    },
    });

    var styles = StyleSheet.create({
    container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    },
    teststyle: {
    fontSize:50,
    textAlign:'left',
    margin:10,
    }
    });

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

    //FirstPageComponent.js
    'use strict';

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

    var {
    View,
    Text,
    StyleSheet,
    TouchableOpacity
    } = React;

    var SecondPageComponent = require('./SecondPageComponent');

    var FirstPageComponent = React.createClass({
    getInitialState: function() {
    return {
    id: 2,
    user: null,
    };
    },
    componentDidMount: function() {
    },
    _pressButton: function() {
    var _this = this;
    const { navigator } = this.props;
    if(navigator) {
    navigator.push({
    name: 'SecondPageComponent',
    component: SecondPageComponent,
    params: {
    id: this.state.id
    //从SecondPageComponent获取user

                }
            });
        }
    },
    render: function() {
        if( this.state.user ) {
            return(
                <View style={styles.container}>
                    <Text>用户信息: { JSON.stringify(this.state.user) }</Text>
                </View>
            );
        }else {
            return(
                <View style={styles.container}>
                    <TouchableOpacity onPress={this._pressButton}>
                        <Text>查询ID为{ this.state.id }的用户信息</Text>
                    </TouchableOpacity>
                </View>
            );
        }
    
    }
    

    });
    var styles = StyleSheet.create({
    container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    },
    teststyle: {
    fontSize:50,
    textAlign:'left',
    margin:10,
    }
    });

    module.exports = FirstPageComponent;

    //SecondPageComponent
    'use strict';

    var React = require('react-native');
    var USER_MODELS = {
    1: { name: 'mot', age: 23 },
    2: { name: '晴明大大', age: 25 }
    };
    var {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    } = React;

    var FirstPageComponent = require('./FirstPageComponent');

    var SecondPageComponent = React.createClass({
    getInitialState: function() {
    return {
    id: null
    };
    },
    componentDidMount: function() {
    //这里获取从FirstPageComponent传递过来的参数: id
    this.setState({
    id: this.props.id
    });
    },
    _pressButton: function() {
    const { navigator } = this.props;

        if(this.props.getUser) {
            var user = USER_MODELS[this.props.id];
            this.props.getUser(user);
        }
            
        if(navigator) {
            navigator.pop();
        }
    },
    render: function() {
        return(
            <View style={styles.container}>
                <Text>获得的参数: id={ this.state.id }</Text>
                <TouchableOpacity onPress={this._pressButton}>
                    <Text>点我跳回去</Text>
                </TouchableOpacity>
            </View>
        );
    }
    

    });

    var styles = StyleSheet.create({
    container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    },
    teststyle: {
    fontSize:50,
    textAlign:'left',
    margin:10,
    }
    });

    module.exports = SecondPageComponent;

    不知道为什么,我的代码有的能被论坛识别有的不能
    排版了半天还是不行:cry:



  • @拒绝的右边
    这段代码一共3个文件:
    index.ios.js、FirstPageComponent.js、SecondPageComponent.js
    不太会排版,不好意思啦
    感谢 mozillo 的http://bbs.react-native.cn/topic/20/%E6%96%B0%E6%89%8B%E7%90%86%E8%A7%A3navigator%E7%9A%84%E6%95%99%E7%A8%8B
    官方文档我这个新手理解起来太难了