react-navigation

问题 I have created a component that connects to redux and returns the currently loaded item's name as the navigation title. But when I try to get the title from this component it breaks with this error: Error: `title` cannot be defined as a function in navigation options for `StockScreen` screen. Try replacing the following: { title: ({ state }) => state... } with: ({ navigation }) => ({ title: navigation.state... }) This is my component: import { connect } from 'react-redux'; let Title = () => {

问题 I build an app with react-native, expo and react-navigation. I have a main drawer navigator who has in it 2 other stack navigator. One stack navigator have 2 pages; Products and Product. When I click on one product in the Products page, it goes into the Product page. Ben if I click on another link in my drawer navigator, I would like that the Products page's stack navigator would return to it's initialRoute when leaving the stack navigator. I tried to set the initialState for when I exit the

问题 I use react-native-code-push. which is: This plugin provides client-side integration for the CodePush service, allowing you to easily add a dynamic update experience to your React Native app(s). but In some of native implementations of navigation like react-native-navigation there isn't any root component. the app will start calling a function like this: // index.js import { Navigation } from 'react-native-navigation'; Navigation.startTabBasedApp({ tabs: [ { label: 'One', screen: 'example

问题 I am using react-navigation in React Native and I want to create a sidebar menu which opens as an overlay that comes from left to the right and fills up around 80-90% of the width. Without react-navigation, this is possible with packages such as react-native-side-bar , but I am wondering if I can get the exact same feature with DrawerNavigator. But it seems DrawerNavigator has menu buttons. Isn't it possible to configure the overlay myself? Edit Solution 1 One way would be to use const

问题 With current version of react-navigation, there are two ways to check if a screen is focused or not, by either (1) calling function isFocused of screen's prop navigation , or (2) hook the component to withNavigationFocused and retrieve prop isFocused . However, both methods always return true when navigation starts. In my case, I need something triggering only when screen transition ends, i.e. new screen is fully focused. This is to deal with heavy-rendered children, such as camera or map,

问题 (also asked in https://github.com/react-navigation/react-navigation/issues/4059#issuecomment-453100740) I have replaced a static TabNavigator with a dynamic one, and things seem to work. However, props that have been passed as expected are not passed any more the same way. Any idea how to fix this? Either by having the props passed as in the static solution, or by passing the required props (this.props.navigation). This is my top navigator: export default createDrawerNavigator({ Drawer:

问题 I need to pass theme settings to navigation options of each screen. Settings are stored in redux. In old version I would write something like that: const AppNavigator = StackNavigator({ Home: { screen: MainList }, Settings: { screen: Settings }, NewEvent: { screen: NewEvent }, Contacts: { screen: Contacts }, Map: { screen: Map}, }) And in render function... <AppNavigator screenProps={{ settings: this.props.settings, headerTintColor: '#ffffff' }} /> ...where props.settings is a part of redux

问题 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. 回答1: 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

问题 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

问题 I am building a cross-platform native application using react-native and using react-navigation for navigating to and from screens and managing navigation state using redux. The problem arises when I am nesting my navigators. For example, I am using Stack Navigator as the default navigator for my app. export const DefaultNavigate = new StackNavigator( { Login: { screen: LoginScreen, }, Home: { screen: AppDrawerNavigate, }, AppTabNav: { screen: AppTabNavigator, }, } ); where my first screen is