=>我想在按下或从一个选项卡滑动到另一个选项卡并重新更改视图时重新加载选项卡栏。 =>我使用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绑定