Navigator带参数测试

来源：互联网发布：php程序格式编辑：程序博客网时间：2024/05/06 04:36

1.index.android.js

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

'use strict';
import React, {
Component
} from 'react';
import {
AppRegistry,
StyleSheet,
PixelRatio,
Navigator,
ScrollView,
Text,
View
} from 'react-native';

//const Header=require('./header');
import Header from './header';

const USER_MODELS = {
1: {
    name: 'mot',
    age: 23
},
2: {
    name: '晴明大大',
    age: 25
}
};

export default class MyProject extends Component {
render() {
    let defaultName = 'Index';
    let defaultComponent = Index;
    return ( < Navigator initialRoute = {
        {
          name: defaultName,
          component: defaultComponent
        }
      }
      //配置场景
      configureScene = {
        (route) => {

//这个是页面之间跳转时候的动画，具体有哪些？可以看这个目录下，有源代码的: node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js

          return Navigator.SceneConfigs.VerticalUpSwipeJump;
        }
      }
      renderScene = {
        (route, navigator) => {
          let Component = route.component;
          return <Component {...route.params} navigator={navigator} />
        }
      }
      />

);
}
}

class Index extends Component {
render() {
    return (
      <View style={styles.flex}>
            <Header></Header>
            <List title='一线城市楼市退烧有房源一夜跌价160万'></List>
            <List title='上海市民称墓地太贵买不起买房存骨灰'></List>
            <List title='朝鲜再发视频:摧毁青瓦台一切化作灰烬'></List>
            <List title='生活大爆炸人物原型都好牛逼'></List>

            <ImportantNews
                news={[
                '解放军报报社大楼正在拆除标识已被卸下(图)',
                '韩国停签东三省52家旅行社或为阻止朝旅游创汇',
                '南京大学生发起亲吻陌生人活动有女生献初吻-南京大学生发起亲吻陌生人活动有女生献初吻-南京大学生发起亲吻陌生人活动有女生献初吻',
                '防总部署长江防汛:以防御98年量级大洪水为目标'
                ]} navigator={this.props.navigator}>
            </ImportantNews>
        </View>
    );
}
}

class List extends Component {
render() {
    return (
      <View style={styles.list_item}>
               <Text style={styles.list_item_font}>{this.props.title}</Text>
            </View>
    );
}
}

class ImportantNews extends Component {

constructor(props) {
    super(props);
    this.state = {
      id: 1,
      user: null,
    };
}

show(title, i) {

    //alert(title);
    const {
      navigator
    } = this.props;
    //alert(navigator);
    //为什么这里可以取得 props.navigator?请看上文:
    //<Component {...route.params} navigator={navigator} />
    //这里传递了navigator作为props
    const self = this;
    if (navigator) {
      navigator.push({
        name: 'Detail',
        component: Detail,
        params: {
          id: i,
          //从详情页获取user
          getUser: function(user) {
            self.setState({
              user: user
            })
          }
        }
      })
    }

}

render() {
    var news = [];
    for (var i in this.props.news) {
      var text = (
        <Text
                    onPress={this.show.bind(this,this.props.news[i],i)}
                    numberOfLines={2}
                    style={styles.news_item}
                    key={i}

                    >{this.props.news[i]}</Text>
      );
      news.push(text);
    }
    //if (this.state.user) {
    //回传数据
    alert(JSON.stringify(this.state.user));
    //}
    return (
      <View style={styles.flex}>
                <Text style={styles.news_title}>今日要闻</Text>
                {news}

</View>

);
}
}

class Detail extends Component {

constructor(props) {
    super(props);
    this.state = {
      id: null
    };
}

componentDidMount() {
    //这里获取从FirstPageComponent传递过来的参数: id
    this.setState({
      id: this.props.id
    });
}

_pressButton() {
    const {
      navigator
    } = this.props;
    if (this.props.getUser) {
      let user = USER_MODELS[this.props.id];
      this.props.getUser(user);
    }

    if (navigator) {
      //很熟悉吧，入栈出栈~ 把当前的页面pop掉，这里就返回到了上一个页面:List了
      navigator.pop();
    }
}

render() {

return (

      <ScrollView>
                <Text style={styles.list_item} >传递过来的用户id是：{this.state.id}</Text>
              <Text style={styles.list_item} onPress={this._pressButton.bind(this)} >点击我可以跳回去</Text>

</ScrollView>

);
}
}

const styles = StyleSheet.create({

flex: {
flex: 1,
},

list_item: {
    height: 40,
    marginLeft: 10,
    marginRight: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#ddd',
    justifyContent: 'center',
},

list_item_font: {
fontSize: 16,
},

news_item: {
    marginLeft: 10,
    marginRight: 10,
    fontSize: 15,
    lineHeight: 40,
},

news_title: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#CD1D1C',
    marginLeft: 10,
    marginTop: 15,

},
});

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

2.header.js

/**
* Created by StevenJiang on 2016/4/4.
*/
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/

'use strict';
import React, {
    Component
} from 'react';
import {
    AppRegistry,
    StyleSheet,
    PixelRatio,
    Text,
    View
} from 'react-native';

class Header extends Component {
    render() {
        return (
            <View style={styles.flex}>
                <Text style={styles.font}>

</View>

);
}
}

const styles = StyleSheet.create({
    flex: {
        marginTop: 25,
        height: 50,
        borderBottomWidth: 3 / PixelRatio.get(),
        borderBottomColor: '#EF2D36',
        alignItems: 'center',
    },
    font: {
        fontSize: 25,
        fontWeight: 'bold',
        textAlign: 'center',
    },
    font_1: {
        color: '#CD1D1C',
    },
    font_2: {
        color: '#FFF',
        backgroundColor: '#CD1D1C',
    },
});

module.exports = Header;

0 0