我们如何从导航器条目中打开链接?例如:
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
显示您可以传递到抽屉的参数之一。所有选项都在这里定义:
https://reactnavigation.org/docs/drawer-navigator/
接下来,我们要创建在
Drawer.Navigator
道具之一中引用的自定义抽屉内容。您还可以像我们之前对抽屉导航项所做的那样应用非常相似的道具。请记住,所有自定义链接都将显示在之前引用/定义的 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>
);
}
如果万一有人遇到这个问题,这就是我在 2023 年解决这个问题的方法。
基本上,您必须将路径嵌套在传递给导航容器的
linking
对象中。
const DrawerNavigator = () => {
return (
<Drawer.Navigator>
<Drawer.Screen
name="favorites"
component={Favorites}
/>
</Drawer.Navigator>
)
}
const StackNavigator = () => {
return (
<Stack.Navigator>
<Stack.Screen
name="Drawer"
component={DrawerNavigator}
/>
</Stack.Navigator>
)
}
export default function App() {
const linking = {
prefixes: [<YOUR_PREFIX>],
config: {
screens: {
Drawer: {
screens: {
favorites: "favorites",
},
},
},
},
};
return (
<>
<NavigationContainer linking={linking}>
<StackNavigator />
</NavigationContainer>
</>
);
}
有没有办法在应用程序中打开网站,以便保留页眉、页脚、导航等?