在React Native的新闻标签栏上重新加载tabview

时间:2019-04-25 07:22:23

标签: react-native react-native-tab-view

=>我想在按下或从一个选项卡滑动到另一个选项卡并重新更改视图时重新加载选项卡栏。 =>我使用listview,它在render方法中没有改变

“反应”:“ 16.6.3”,     “ react-native”:“ ^ 0.58.5”, “ react-native-tab-view”:“ ^ 1.3.4”,

this.state = {
           isOnDefaultToggleSwitch: global.toggle_btn_value,

            isOnLargeToggleSwitch: false,
            isOnBlueToggleSwitch: false,

            index: 0,
            routes: [
                { key: 'new', title: 'New' },
                { key: 'current', title: 'Current' },
                { key: 'deliver', title: 'Delivered' },
            ],

            initialPage: 1, activeTab: 1,



        };
_renderTabBar = props => {
      // console.log(props)

        return (

            <TabBar
                {...props}

                indicatorStyle={{ backgroundColor: 'white'}}
                labelStyle={{color:'white'}}
                style={styles.tabStyle}
                pressColor={'white'}
                onTabPress={tab =>{
                    console.log(tab.route.key);

                    if(tab.route.key == 'new'){

                        if(global.toggle_btn_value== false){


                            return <New_Order_Page_Blank_Data/>
                        }
                        else{

                            this.Obj.New_Order_Page_Data();


                        }

                    }
                    else if(tab.route.key == 'current'){



                        this.Obj1.Current_Order_page_data();
                       // this.props.navigation.navigate('cur_ord_pg')
                    }
                    else if(tab.route.key == 'deliver'){


                        this.Obj2.Delivered_Order_page_data();
                        //this.props.navigation.navigate('del_ord_pg')
                    }
                }}

            />


    );

    };

    _handleIndexChange = (index,route) => {
        console.log(index )
        this.setState({
            index:index
        });
        global.index1 =index;
        console.log('index value',global.index1);

        if(global.index1 =='0'){


        }else if(global.index1 =='1'){
            //this.renderScene("current");

        }
        else{
            //this.renderScene("deliver");
        }


    };

    FirstRoute =()=>(

        <NewOrder_AppNavigator />

    );
    SecondRoute = () => (

        <CurrentOrder_AppNavigator />

    );
     ThirdRoute = () => (

        <DeliveryOrder_AppNavigator />

    );

 renderScene=({ route }) => {
        console.log('render',route)
    switch (route.key) {
    case 'new':
    if(global.toggle_btn_value== false){
    return <New_Order_Page_Blank_Data/>
    }
    else{
    return this.FirstRoute();
    }


    case 'current':
    return this.SecondRoute();
    case 'deliver':
    return this.ThirdRoute();
    default:
    return null;
    }
}

  render() {

        return (

            <View style={styles.container}
            ref={this.Homescreen}
            >
                <View style={styles.topHeader}>
                    <TouchableOpacity onPress={() => this.props.navigation.openDrawer()}>
                        <Icon name="menu" size={30} color='#ffffff'/>

                    </TouchableOpacity>
                    <Text style={{color: 'white', fontSize: 24, marginLeft: 10,}}>Tasks </Text>

                    <View style={styles.rightSwt}>
                        <ToggleSwitch onColor='green' offColor='gray' circleColorActive='green'
                                      label="Duty"
                                      labelStyle={{color: 'white', fontSize: 20,}}
                                      isOn={this.state.isOnDefaultToggleSwitch}
                                      onToggle={isOnDefaultToggleSwitch => {
                                          this.setState({isOnDefaultToggleSwitch});
                                          this.onToggle(isOnDefaultToggleSwitch);
                                      }}
                        />
                    </View>
                </View>

                <View style={styles.scene}>

                    <TabView
                        initialPage={this.state.initialPage}
                        page={this.state.activeTab}
                        navigationState={this.state}


                        getAccessibilityLabel={({ route }) => route.accessibilityLabel}
                            renderScene={this.renderScene}
                        renderTabBar={this._renderTabBar}
                        onIndexChange={this._handleIndexChange}
                        initialLayout={{
                            width: Dimensions.get('window').width,
                            height: Dimensions.get('window').height
                        }}
                        onRequestChangeTab={index => this.setState({ index })}

                    />




                </View>

            </View>

        );
    }

=>在新订单页面api响应出现但数据未在render方法中绑定的情况下,我使用Listview并在视图中将数据与rowData.keyname绑定

0 个答案:

没有答案