react-navigation

React Navigation Drawer: Dynamically routes and navigation items?

由 此生再无相见时 提交于 2019-12-07 20:18:29
Right now I am facing a problem.. Before my application gets mounted, I am fetching categories from an API. Now I want to have a dynamic app which always contains the newest data. I want to have the different categories always as a separated screen. The functions I need for every category screen is always the same. So, I have build myself a screen template. However, I have to fetch the different categories from the API and then import my template screen as many times as I have fetched categories to create a screen for each category. Furthermore, I need to pass the category to the template

Dynamic route with React Navigation

由 ╄→гoц情女王★ 提交于 2019-12-07 18:44:48
问题 I have a react native app running with react navigation 3.9 with 2 components Signup and Event : export default class Signup extends React.Component { } export default class Event extends React.Component { } Also there is a splash component which retrieve local token. Whenever there is a token retrieved from local drive, then the initial route is Event . Otherwise the it is Signup . const stack = createStackNavigator ({ Event: Event, Signup: Signup, },{ InitialRouteName: InitRoute //<<either

How to use tabBarComponent for TabNavigator? Tab bar not showing

由 懵懂的女人 提交于 2019-12-07 15:16:07
问题 I'm trying to make my own custom tab bar and it seems tabBarComponent is the way to do it by setting as my own component. With the below code my tab bar does not show up. const TabNav = TabNavigator({ LaunchScreen: { screen: PrimaryNav, navigationOptions: { tabBarLabel:'Find', tabBarIcon: ({ tintColor }) => ( <Icon name='search' size={20} color='white' /> ), }, }, }, { navigationOptions: { headerTintColor: 'grey' }, tabBarComponent: FooterTabs, tabBarPosition: 'bottom', swipeEnabled:false,

Dynamically hide/show header in react-native

由 给你一囗甜甜゛ 提交于 2019-12-07 13:24:11
问题 I am using react-navigation for routing purpose. I want to dynamically hide or show header on one component. Any way to do it? I change headerLeft dynamically like this but can not find any way to do it for entire header. static navigationOptions = ({ navigation }) => ({ headerRight: navigation.state.params ? navigation.state.params.headerRight : null }); this.props.navigation.setParams({ headerRight: ( <View> <TouchableOpacity onPress={() => blaa} > <Text>Start</Text> </TouchableOpacity> <

Dynamically change drawerPosition config of DrawerNavigator in react-navigation

由 拜拜、爱过 提交于 2019-12-07 12:15:17
问题 I have a DrawerNavigator config for my main routes const App = DrawerNavigator(DrawerRoutes, { initialRouteName: 'Main', contentComponent: ({ navigation }) => <DrawerMenu navigation={navigation} routes={DrawerRoutes} />, mode: Platform.OS === 'ios' ? 'modal' : 'card', drawerWidth: Dimensions.get('window').width - (Platform.OS === 'android' ? 56 : 64), drawerPosition: 'left', }) I want to change the drawerPosition property depending on the current language of the application. I have already

touchableopacity onpress function undefined (is not a function) React Native

由 我的未来我决定 提交于 2019-12-07 11:41:34
问题 I want to be able to navigate to a new screen after tapping the TouchableOpacity button but I receive an error which says _this3.handleThisTap is not a function. (In '_this3.handleThisTap()','_this3.handleThisTap' is undefined) import React, { Component } from 'react'; import { Text, StyleSheet, View, TextInput, KeyboardAvoidingView, FlatList, TouchableOpacity, TouchableHighlight, } from 'react-native'; import { SearchBar, Wrapper, ItemWrapper, } from './searchView.styles'; export default

Hide parent's navigation header from the nested navigator

由 耗尽温柔 提交于 2019-12-07 11:33:30
I'm developing my first react native app. I've an issue with the nested navigations in the app. I've the following navigations: Main App Navigator : createStackNavigator Authentication Navigator : createStackNavigator Bottom Bar Navigator : createBottomTabNavigator Top Tab Navigator : createMaterialTopTabNavigator My too nested Navigator : createStackNavigator What i want ? I'm trying to hide the BottomBar & TopTab Navigators headers form a screen in the last nested navigator. What I did? Ive tried to set the header as null in my nested nav, but thats hides the nested header not the parents

The best way to create a scrollable tab in the middle of the screen?

由 霸气de小男生 提交于 2019-12-07 05:17:37
问题 The mobile app of Twitter has a scrollable tab in the middle of the screen when you are on your profile. The top half of the screen displaying your profile info etc doesn't change when you click on the scrollable tabs mid screen : "Tweets & replies", "Media" etc. I am wondering how one would create this? Having half the screen stay the same and then having tabs which change mid screen... At the moment I have react navigation tabs as my main navigation - so on one of these tabs (the profile

React Native 0.56 + Enzyme + Jest + React Navigation: Enzyme crashes because of import statement

由 生来就可爱ヽ(ⅴ＜●) 提交于 2019-12-07 03:35:28
TL;DR: My tests crash, because of the following error linked to React Navigation: /path-to-app/react-native/myApp/node_modules/react-navigation/src/views/withNavigation.js:1 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react'; ^^^^^^ SyntaxError: Unexpected token import 127 | } 128 | > 129 | export default withNavigation( | ^ 130 | connect( 131 | null, 132 | { loginSuccess } at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17) at Object.get withNavigation [as withNavigation]

React-native-navigation: goBack() doesn't work

由 雨燕双飞 提交于 2019-12-07 02:49:18
问题 I use React Navigation with Redux in React Native. Navigation is working fine, but on one screen the goBack() function doesn't work. Can you tell we why? This is the header config: static navigationOptions = { header: ({ state, goBack }) => { return { title: state.params.name, right: (<Button title={'Done'} onPress={() => goBack()} />) } } } This is the dispatched event: No Screen is poped off. The Screen on the device stays the same. 回答1: Try <Button onPress={() => this.props.navigation
订阅 react-navigation