react-native第二天笔记

  1.组件和组件之间的通信   这是index首页（父组件）
     <ScrollableTabView
          renderTabBar={() =>
               <DefaultTabBar style={{ borderBottomWidth : 0, height : 50 }}/>
                        }
                        tabBarUnderlineStyle={{ backgroundColor : 'white', height : 1, width : SCREEN_WIDTH * 0.2, marginLeft : SCREEN_WIDTH * 0.15, marginBottom : 10 }}
                        tabBarActiveTextColor={'white'}
                        tabBarTextStyle={{ fontSize : 18 }}
                        tabBarInactiveTextColor={'#99d0f8'}
                        style={{ height : SCREEN_HEIGHT, zIndex : 2 }}
                        >
                          <View tabLabel={'领用记录'} style={{ marginTop : 0, backgroundColor : '#FAFAFA'}}>
                             <CollaRecord     
                                ref={'collaRecord'}    // 给自己做个标记
                                navigation={this.props.navigation}  
                                goBack={() => this.goBack()}
                                openSearch={(ref) => {      this.refs['collaRecordSearch'].refs[ref].show() } }               // 时间选择器
                                showAlert={() => {    this.refs['collaRecordSearch'].refs['alertDialog'].show() }}      // 归还弹出框
                             >
                             </CollaRecord>
                          </View>
                    </ScrollableTabView>
           <CollaRecordSearch                                    // 时间选择器的组件
                    ref={'collaRecordSearch'}            
                    onPress={async (data) => {
                        if(data.ref == 'alertDialog'){
                            await this.refs['collaRecord'].return();     // 归还的方法
                        }else{
                            await this.refs['collaRecord'].changeSearch(data)   //  时间选择器赋值
                        }
                    }}
                >
                </CollaRecordSearch>

2.这是子组件页面
export class CollaRecord extends Component {
    constructor(props) {
        super(props)
        this.state = {
            user: {    // 用户的基本信息
                name: '',
                id: '',
            },
            query: {         
               type:1,
               pageNum: 1,   // 当前页数
               pageSize: 15, // 最大页数
               startTime: '', // 开始时间
               endTime: '',  // 结束时间 
               porder : 'r.create_date',
               psort : 'DESC'    
            },
        }
    }
    render() {
        return (
            <View>
                <View style={styles.formContainer}>
                    <TouchableHighlight onPress={() => this.props.openSearch && this.props.openSearch('startDatePicker')} activeOpacity={1} underlayColor={'transparent'}>
                        <View style={styles.formColumnContainer}>
                            <View style={styles.formColumnLeftContainer}>
                                <Image source={require('./../../../images/icon/ic_time.png')} style={{ width: 20, height: 20 }}></Image>
                                <Text style={[styles.fontSize, styles.fontGrayColor, { marginLeft: 10 }]}>开始时间</Text>
                            </View>

                        </View>
                    </TouchableHighlight>
                </View>
                <View style={{ height: this.state.getData.length == 0 ? SCREEN_HEIGHT * 0.50 : (SCREEN_HEIGHT * 0.90 - 60 - 150) }}>
                    <FlatList
                        data={this.state.getData}
                        renderItem={({ item }) => this.renderItem(item)}
                        onRefresh={async () => { await this.onRefresh() }}
                        refreshing={this.state.loading}
                        onEndReachedThreshold={0.1}
                        onEndReached={async () => { await this.onEndReached() }}
                        // 空布局   没有数据出现的页面
                        ListEmptyComponent={this.renderEmpty()}
                        ListFooterComponent={this.state.getData.length == 0 || this.state.getData.length != this.state.total ? null :
                            <View style={{ justifyContent : 'center', alignItems : 'center', width : SCREEN_WIDTH, height : 30 }}>
                                <Text style={{ fontSize : 16 }}>没有更多数据了!</Text>
                            </View>
                        }
                    />
                </View>
            </View>
        );
    }

    renderItem(item, index) {
        let status = null;
        if (item.auditStatus == 0) {
            status = <Text style={[styles.consumables, { color : '#53dfcd' }]}>未审核</Text>
        } else if (item.auditStatus == 1) {
            status = <Text style={[styles.consumables, { color : '#0ea9f3' }]}>已通过</Text>
        } else {
            status = <Text style={[styles.consumables, { color : '#f95a28' }]}>审核失败</Text>
        }
        return <View style={styles.box}>   //  ***return后面一定要有<View>的 要不然不会显示***   
            <View style={styles.recordPro}>
                <Image style={{
                    width: 14,
                    height:14
                }} source={require('./../../../images/icon/ic_time.png')}></Image>
                <Text style={styles.number}>
                    领取时间:
                </Text>
                <Text style={styles.amount} numberOfLines={1}>{item.receiveTime.getTime()}</Text>
            </View>
            <View style={styles.recipients}
                <View style={{ marginRight: SCREEN_WIDTH * 0.02, position: 'relative', bottom : 15}}>
                    <Button
                        title="归还"
                        onPress={async () =>  {
                            this.setState({ 
                                returnQuery : Object.assign(this.state. returnQuery, 
                                  {quantity:item.amount},{goodsId:item.goodsId},{receiveId:item.id},                                                            {itemName:item.goods.itemName},
                                  {operationUserId:this.state.user.id}                               
                                )                          
                            })
                            this.props.showAlert && this.props.showAlert();
                        }}
                        color='#3fd95c'
                    >
                    </Button>
                </View>
            </View>

        </View>
       }
    async return() {
        let result = await insertRepertory(this.state.returnQuery);
        if (result.result == -1) {
            return;
        }
        getToast(true,'归还成功',1500);

        this.setState({ query : Object.assign(this.state.query, {pageNum: 1}) });
        await this.getData(this.state.query);


    }
    // 当搜索框改变的事件
    async changeSearch(result) {
        switch (result.ref) {
            case 'startDatePicker':
                await this.setState({ 
                    query: Object.assign(this.state.query, { startTime: result.data, pageNum : 1  }),
                    startTime : result.data.getDate()
                });
            break;
            case 'endDatePicker':
                await this.setState({ 
                    query: Object.assign(this.state.query, { endTime: result.data, pageNum : 1  }),
                    endTime : result.data.getDate()
            })
            break;
        }
        await this.getData(this.state.query);
    }

   async getData(data) {                                          //  这个函数比较规范 调接口专门弄个函数，可以实现复用，
        let result = await getMyRepertoryAll(data); //  接口名
        if (result.result == -1) {
            return;
        }
        for (let i = 0; i < result.data.rows.length; i++) {
            result.data.rows[i].key = result.data.rows[i].id;   // FlatList 这个必须给每个key绑定一个id，要不然会报错的
        }
        this.setState({ getData: result.data.rows, total : result.data.total });
    }
this.getData(this.state.query);// 到时候就直接调用  方便  也便于维护

----------   上拉刷新   下拉加载


    async onEndReached() {         // 下拉加载更多
        // 当前页数加1
        await this.setState({ query : Object.assign(this.state.query, {pageNum: this.state.query.pageNum + 1}) });
        // 获得当前列表数据
        var getData = this.state.getData;
        // 更新列表数据
        await this.getData(this.state.query);  // getData是个函数
        // 如果下一页没有数据 则不变更pageNum的值
        if(this.state.getData.length == 0){
            this.setState({ query : Object.assign(this.state.query, {pageNum: this.state.query.pageNum   - 1}) });
        }
        this.setState({ getData : getData }) //  重新把当前页面的数据赋值给getData，因为他此时为[];
    }

    // 上拉刷新
    async onRefresh() {
        // 上拉刷新 页数默认为1(要是用户先下拉了好几页，然后上拉，数据是有的，但是当前页面是好几页，就会呈现没有数据的尴尬局面，所以默认为第一页的数据)
        this.setState({ loading : true, query : Object.assign(this.state.query, {pageNum: 1}) });
        await this.getData(this.state.query)  // 调接口
        this.setState({ loading : false });   // loading消失
    }
    // 当列表为空时渲染的内容
    renderEmpty() {
        return <View style={{ justifyContent: 'center', alignItems: 'center', height: SCREEN_HEIGHT * 0.50 }}>
            <Text style={{ color: '#CCCCCC', fontSize: 16, marginBottom: 30 }}>暂无数据!</Text>
            <Image
                source={require('./../../../images/icon/ic_wushuju.png')}
                style={{ width: scaleSize(600), height: scaleSize(320) }}
                resizeMode={'stretch'}></Image>
            <TouchableHighlight
                onPress={async () => { await this.onRefresh() }}
                underlayColor={'transparent'}
                activeOpacity={0.5}>
                <View style={{
                    marginTop: 30,
                    flexDirection: 'row',
                    width: 100,
                    height: 40,
                    borderRadius: 5,
                    borderWidth: 1,
                    borderColor: '#96D9F8',
                    justifyContent: 'center',
                    alignItems: 'center'
                }}>
                    <Image source={require('./../../../images/icon/ic_shuaxin.png')} style={{ marginRight: 10 }}></Image>
                    <Text style={{ color: '#0ea9f3', fontSize: 16 }}>刷新</Text>
                </View>
            </TouchableHighlight>
        </View>;
    }

    componentWillUnmount() {
        if (Platform.OS === 'android') {
            BackHandler.removeEventListener('hardwareBackPress', () => { });
        }
    }
}

3.Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

合并具有相同属性的对象
var o1 = { a: 1, b: 1, c: 1 };
var o2 = { b: 2, c: 2 };
var o3 = { c: 3 };

var obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }

3.1. 要是query是一个对象，重新setState时候，应该要Object.assign(里面具有相同的字段–属性)深复制;

   await this.setState({ 
           query: Object.assign(this.state.query, { startTime: result.data, pageNum : 1  }),
             startTime : result.data.getDate()
    });

4.路由之间的传值；从a页面传到b页面；

 <ListItem avatarOverlayContainerStyle={styles.avatarOverlayContainer} containerStyle={ styles.avatarContainer } avatarStyle={styles.avatar}
             avatar={require('./../../images/setting/info/yijianfenkui.png')}
                   title={'意见反馈'}
                   rightIcon={<Image source={require('./../../images/setting/info/xiangyou.png')}> </Image>}                         
                    onPress={()=>this.props.navigation.navigate('FeedBack',{
                       goBack : (()=>{this.goBack()}),
                          a:'你好'    // 传一个对象
                       })}  underlayColor={'transparent'}
                  />

b页面进行接受：
 async componentWillMount() {
        if(typeof (this.props.navigation.state.params) !="undefined") {
            let  a = this.props.navigation.state.params.a;
            console.log(a)  // 你好  就拿到了从a页面传过来的值        
        }   
    }