react-navigation

How can I tell if the screen is navigated to with ReactNavigation

由 懵懂的女人 提交于 2019-12-07 02:44:24
问题 I'd like to refresh the data on the screen in a react native app whenever the screen appears - like in a ViewWillAppear method. I tried using the componentWillMount method but it looks like it fires once before it appears, and doesn't fire again when the view is navigated to again. Looking at this example https://reactnavigation.org/docs/guides/screen-tracking, it looks like I can add a listener on the onNavigationStateChange method on the root navigation, but I'd like to keep the logic in

Adding multiple events to onPress function in React Native

由 拜拜、爱过 提交于 2019-12-07 01:35:29
问题 When I press the button, it supposed to navigate to another page and it also increase the view count. But I can't figure out anyway to implement them at the same time. This is my code: <Button onPress={Actions.ideaOnClick}> <Button onPress={() => this.setState({views: ++this.state.views})}> 回答1: yourFunction(){ Actions.ideaOnClick(); this.setState({views: ++this.state.views}); } <Button onPress={this.yourFunction.bind(this)}}> 回答2: Just create a function that does both things. No other way

Header title is empty in TabNavigation

由 ﹥＞﹥吖頭↗ 提交于 2019-12-06 15:02:16
问题 Header title seems to not work as expected. I already updated react-native and all other dependencies to their latest version and reviewed react-navigation documentation. Also I created a bug on github for this item. Can you please take a look if I doing something wrong? I need to have header title set when i am using TabNavigation const RootNavigator = createStackNavigator({ ...publicScreens, Private: { screen: PrivateNavigator } }, publicScreensConfig); const privateScreens = { ContactList:

Cannot read property 'navigate' of undefined in react-navigation

由 我怕爱的太早我们不能终老 提交于 2019-12-06 14:54:19
I have used import { StackNavigator } from 'react-navigation'; in my Router.js import { StackNavigator } from 'react-navigation'; import LoginForm from './components/LoginForm'; import EmployeeList from './components/EmployeeList'; import EmployeeCreate from './components/EmployeeCreate'; const RouterComponent = StackNavigator( { LoginForm: { screen: LoginForm, navigationOptions: { title: 'Please Login' } }, EmployeeList: { screen: EmployeeList, }, EmployeeCreate: { screen: EmployeeCreate, navigationOptions: { title: 'Create Employee' } } }, { initialRouteName: 'LoginForm', } ); export default

React Navigation: Scroll to top if tab is the same as active tab

由 被刻印的时光 ゝ 提交于 2019-12-06 12:03:32
问题 I have a tab-based app. If I'm currently on the first tab, scrolled all the way down, and I click the tab again, I want it to scroll to the top. Is this possible? I know I should have a scroll view with a reference and then use this._scrollView.scrollTo(0) , but how can I detect when the user taps the tabbar and decide whether it is the same tab? 回答1: You can create your tab navigator as follow: const TabNav = TabNavigator({ // config }, { navigationOptions: ({ navigation }) => ({

React-navigation variable tab width

由 我们两清 提交于 2019-12-06 10:58:27
Where can I set variable tab width rather than fixed in React navigation? Currently all tabs are same width, need to wrap it to text width. You can use the tabBarLabel option in the navigationOptions. Using the style property on a Text element you can then set the width. navigationOptions: { tabBarLabel: <Text style={{ textAlign: 'center', width: 200 }}>Long Tab Title</Text> }, 来源： https://stackoverflow.com/questions/48616248/react-navigation-variable-tab-width

How to implement a multiple group chat in react-native?

由 随声附和 提交于 2019-12-06 06:27:31
问题 I am beginner to ReactNative. I saw Chat in React Native and I have a similar question. I want to have multiple group-chats with each group-chat having a complete different history of messages. Standard way, as I get it, would be to re-use the same Chat component (e.g. GiftedChat) in the Apps render-function and pass the state with the messages of the current group-chat. But this always takes a lot of time to re-render - how could I "store" the views of different group-chats to bypass the re

How to add a custom component to createMaterialTopTabNavigator tab bar

由 ￡可爱￡侵袭症＋ 提交于 2019-12-06 05:43:25
问题 I am using createMaterialTopTabNavigator from react-navigation and trying to customize the tab bar by adding some components on top of it. As you can see in its guide here: https://reactnavigation.org/docs/en/material-top-tab-navigator.html#docsNav there is an option called tabBarComponent that can be passed to create your own tab bar. However, it completely overrides the tab bar which is not what I want. I'd like to add a custom component at the top of the tab bar and then have the default

Is TabNavigator deprecated?

由 烂漫一生 提交于 2019-12-06 05:36:46
问题 When I run the simulator with... react-native run-ios ...I am seeing a message in the terminal that "TabNavigator is deprecated. Please use the createBottomTabNavigator..." However, I don't think TabNavigator is deprecated, and I don't think createBottomTabNavigator exists on the web or in reality generally. Other than that, all's well! Except I can't run my app. Because I get this red-screen error suggesting something is amiss with React Navigation: undefined is not a function (near '...(0 ,

Dynamic route with React Navigation

由 血红的双手。 提交于 2019-12-06 04:56:58
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 Event or Signup }) const initScreen = createSwitchNavigator({ Splash: Splash, App: stack, }) export
订阅 react-navigation