#javascript #reactjs #react-native #tabs #fetch
#язык JavaScript #реагирует на #реагировать-родной #вкладки #извлечь
Вопрос:
Существует полный код. Поэтому сначала я визуализирую компонент(просто означает загрузку), после этого извлекаю некоторые данные, отправляю данные в arr и использую setState(предыдущий arr в массиве) для повторной отправки компонента. И проверьте, содержит ли массив нужное слово: он показывает вкладки, а также значки с этим, но сам компонент просто серый, пока я не нажму на него или не сдвину.
export default class FlowMeterTab extends Component{ constructor(props) { super(props); this.state = { arr:[], array:["Loading"] } } getData=async ()=gt;{ await AsyncStorage.getItem('language') .then(language =gt; { if (language){ i18n.locale = language; }else { i18n.locale = 'ru'; } }); let permissionList=await userService.getCurrentUserInfo(); permissionList.map((list)=gt;{ if (list.menuId) { list.child.map((child) =gt; { if (child.id === 'flowmeter_svalue') { console.log(child) this.state.arr.push(child.id); } }) } }) console.log(this.state.arr) this.setState({array:this.state.arr}); console.log(this.state.array) } async componentDidMount() { await this.getData(); } render() { return ( lt;Tab.Navigator initialRouteName='FlowMeter' screenOptions={({route}) =gt; ({ //Для каждой страницы вместо названии в tab будет иконка tabBarIcon: ({focused, color}) =gt; { let iconName; if (route.name === 'FlowMeterRate') { iconName = 'analytics' } else if (route.name === 'FlowMeterSpeed') { iconName = 'speedometer-sharp' } else if (route.name === 'FlowMeterVPlus') { iconName = 'ios-caret-up-sharp' } else if (route.name === 'FlowMeterVMinus') { iconName = 'ios-caret-down-sharp' } else if (route.name === 'FlowMeterVSum') { iconName = 'ios-checkmark-done-sharp' } else if (route.name === 'No data1') { iconName = 'close-sharp' } else if (route.name === 'No data2') { iconName = 'close-sharp' } return lt;Ionicons name={iconName} size={24} color={color}/gt;; }, tabBarStyle: { "backgroundColor": "white" }, tabBarShowLabel: false })} gt; {this.state.array.includes("Loading") ? lt;Tab.Screen name='No data1' component={NoData} /gt; : null } {this.state.array.includes("flowmeter_svalue") ? lt;Tab.Screen name='FlowMeterRate' component={FlowMeterRate} options={{ tabBarLabel: i18n.t('FlowRate') }} /gt; : lt;Tab.Screen name='No data2' component={NoData} /gt; } {this.state.array.includes("flowmeter_svalue") ? lt;Tab.Screen name='FlowMeterSpeed' component={FlowMeterSpeed} options={{tabBarLabel: i18n.t('FlowSpeed')}} /gt; :null } {this.state.array.includes("flowmeter_svalue") ? lt;Tab.Screen name='FlowMeterVPlus' component={FlowMeterVPlus} options={{tabBarLabel: 'V '}} /gt; :null } {this.state.array.includes("flowmeter_svalue") ? lt;Tab.Screen name='FlowMeterVMinus' component={FlowMeterVMinus} options={{tabBarLabel: 'V-'}} /gt; :null } {this.state.array.includes("flowmeter_svalue") ? lt;Tab.Screen name='FlowMeterVSum' component={FlowMeterVSum} options={{tabBarLabel: i18n.t('VSum')}} /gt; :null } lt;/Tab.Navigatorgt; ) } }