- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我们如何从导航器条目中打开链接?例如,像:
const Home = DrawerNavigator ({
Account: { screen: Account },
Availability: { screen: Availability },
Favorites: { screen: Favorites },
Website: { screen: Linking.openURL('http://www.example.com') }, }
最佳答案
我知道这是不久前提出的,但我最近遇到了这种需求并找到了一个可行的解决方案。
您想先用 createDrawerNavigator
建立抽屉:
import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList, DrawerItem } from '@react-navigation/drawer';
import { Linking } from 'react-native';
const Drawer = createDrawerNavigator();
使用最新版本的 react-native 导航,我们无法像您那样将字段传递给 DrawerNavigator。设置抽屉及其导航内容的一种方法如下:
return (
<Drawer.Navigator
initialRouteName="Account"
drawerPosition="right"
drawerContentOptions={{
activeTintColor: 'white',
inactiveTintColor: 'blue',
activeBackgroundColor: 'blue',
labelStyle: {
fontFamily: 'Arial',
fontSize: 18,
textTransform: 'uppercase',
paddingTop: 5
}
}}
drawerContent={props => <CustomDrawerContent {...props}/>}
>
<Drawer.Screen name="Account" component={Account} />
<Drawer.Screen name="Availability" component={Availability} />
<Drawer.Screen name="Favorites" component={Favorites} />
{/* Custom Links (defined next) */}
</Drawer.Navigator>
);
我已经包含了我的
return
声明以表明这是我在屏幕上呈现的内容。
drawerContentOptions
显示您可以传递给抽屉的参数之一。所有选项都在这里定义:
Drawer.Navigator
之一中引用的自定义抽屉内容。 Prop 。您还可以像我们之前对抽屉导航项所做的那样应用非常相似的 Prop 。请记住,所有自定义链接都将显示在
Drawer.Screen
下方。之前引用/定义的组件。这是由于行
DrawerItemList {...props}>
它接受定义的导航链接列表并将它们显示在我们的自定义链接之前。您可以先反转此自定义显示,但我不确定您是否可以将自定义链接放在中间。
// set up custom links for main navigation drawer
function CustomDrawerContent(props) {
return (
<DrawerContentScrollView {...props}>
<DrawerItemList {...props} />
<DrawerItem
label="Website"
inactiveTintColor={'blue'}
labelStyle= {{
fontFamily: 'Arial',
fontSize: 18,
textTransform: 'uppercase',
paddingTop: 5
}}
onPress={() => Linking.openURL('http://www.example.com')}
/>
</DrawerContentScrollView>
);
}
关于javascript - 使用 DrawerNavigator [React native] 导航到 URL/Deep Link,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47351444/
我有一个带屏幕的抽屉导航器。现在我想访问抽屉菜单按钮中的单屏功能。假设 抽屉导航器: const Drawer = createDrawerNavigator( { Main: {
当我在虚拟设备上运行我的 android 应用程序时,它抛出错误 Undefined is not a function 我试图在我的代码中将“AppDrawerNavigator”替换为“App”,
我想有一个标签栏,每个标签栏都有自己的堆栈导航器。我拥有的三个选项卡是家轮廓设置 我也想在抽屉中显示这三个选项。我创建了一个抽屉,但只有点击主页才能显示标签栏。我想显示标签栏,就像您按下配置文件标签并
TL D R:我有一个登录屏幕,用户可以在其中登录并导航到第二个屏幕。在那里我想打开菜单并将用户名显示为文本。如何将用户名传递给菜单? (抽屉导航器)。 下面是我的代码的一些示例。 路由器: impo
我有两个组件(列表和详细信息): 列表.js: export default class List extends React.Component { render() { c
TabNavigator、DrawerNavigator、StackNavigator 之间有何不同?请解释一下 React Navigation 和 React-native-navigation
我正在使用 React Navigation 库。我已经编写了一个自定义抽屉菜单并将其添加到我的导航器的 contentComponent 配置中。我不知道如何从自定义菜单中确定哪个页面/屏幕处于事件
我正在使用 React Navigation 库。我已经编写了一个自定义抽屉菜单并将其添加到我的导航器的 contentComponent 配置中。我不知道如何从自定义菜单中确定哪个页面/屏幕处于事件
我使用了一个名为 react-native-localization 的库来翻译我的应用程序。除抽屉导航器和底部选项卡导航器的标题外的所有内容都将被翻译。 尝试了不同的方法。但是当我在寻找解决方案时,
我添加了屏幕图像,这项工作在屏幕的一部分。联系人屏幕需要是主页而不是屏幕 1,但如果我在它们之间进行替换,它就不起作用了。我添加了代码,在“LogedInNavigator”中有 TabNavigat
我有一个 bottomTabNavigator,它看起来像这样。 const tabNavigator = createBottomTabNavigator({ [屏幕 1]:{ 屏幕:StackNa
我在 https://reactnavigation.org/docs/navigators/drawer 中使用 DrawerNavigator . const MyApp = DrawerNavi
代码优先: import React, { Component } from 'react'; import {AppRegistry, Image, TouchableHighlight} from
我使用 react-navigation 并希望同时使用 TabNavigator 和 DrawerNavigator。我知道你可以嵌套导航器,但是例如只有抽屉的一个链接有我的标签。 我希望标签导航始
我有一个带有 DrawerNavigator 的 React Native 应用程序。对于菜单,我有自己的组件。效果很好。现在我想在右侧添加第二个侧面菜单。是否可以像 Slack 应用程序中那样拥有两
嘿.. 我目前正在研究 react-navigation 并试图解决抽屉打开时标题未隐藏的问题... 我希望任何人都可以分享如何解决这个有问题的 header ..下面我附上了我在 StackNavi
我在使用 ReactNative,我正在使用 native-base 和 react-navigation npm。 我明白了,我的问题是我如何才能有一个标题,直到“主页”按钮,我查看了 react-
当我从注册屏幕导航到主屏幕时,出现以下错误,如下所述。我在 React Native 中使用嵌套导航的地方。这是我的 app.js import * as React from 'react'; im
我有一个抽屉导航器,里面有 2 个堆栈。我希望每个堆栈的第一个屏幕在标题中显示汉堡包图标,但是当移动到堆栈中的第二个屏幕时,我希望汉堡包被替换为后退按钮。 我如何将抽屉连接到这个切换按钮并让它只显示在
我在 Expo 应用程序中使用 DrawerNavigator,虽然它工作得很好,但我没有看到用于自定义滑动将触发抽屉打开的区域宽度的选项。 目前它是一个相当小的乐队,但我希望它至少更宽一点 - 可能
我是一名优秀的程序员,十分优秀!