标签: react-navigation

我对反应本机路由非常困惑。我是react-native的新手，从来没有研究过React.js。我想问一下，react本机应用程序是像angularJs一样的单页应用程序架构吗？在react-native中有很多路由和导航的方法，比如

1 .react-native-router-flux

2.导航器
等多种方式。有人请告诉我这个 SPA 架构是什么，以及在有更多支持的 React-Native 中路由的最佳方式是什么。我想在我的应用程序中制作侧抽屉菜单和选项卡菜单。请帮我 。提前致谢

我在堆栈导航器中创建了一个嵌套的选项卡导航器，如下所示：

const Stack = createStackNavigator()
const Tab = createBottomTabNavigator();

function TabNav () {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen}></Tab.Screen>
      <Tab.Screen name="Category" component={CategoryScreen}></Tab.Screen>
      <Tab.Screen name="Settings" component={SettingsScreen}></Tab.Screen>
    </Tab.Navigator>
  )
} 

export default function App() {
  return (
    <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Tab" component={TabNav}></Stack.Screen>
          <Stack.Screen name="Category" component={CategoryScreen}>
          </Stack.Screen>
          <Stack.Screen
            name="SpecialBeerScreen" component= {SpecialBeerScreen}>
          </Stack.Screen>
        </Stack.Navigator>
    </NavigationContainer>
  )
}

但是，对于每个屏幕，标题现在看起来都像 Tab。如何使用自定义文本（例如主页、类别等）覆盖每个屏幕的此标题。

我React Navigation 5在我的 React Native 应用程序中使用了 new 。

主菜单由RootNavigatora处理Drawer。登录/注册由AuthNavigationwhich处理Stack。

我试图在成功登录后将用户发送到Home屏幕RootNavigator。换句话说，我试图通过发出将用户发送到另一个导航器下的屏幕，navigation.navigate('RootNavigator', {screen: 'Home'});但我收到一个错误消息：

任何导航器都未处理负载为 {"name":"RootNavigator"} 的操作“NAVIGATE”。

你有一个名为“RootNavigator”的屏幕吗？

这是我的App.js样子：

const App = () => {

  const [isLoading, setIsLoading] = useState(true);
  const [isAuthenticatedUser, setIsAuthenticatedUser] = useState(false);

  useEffect( () => {

    // Check for valid auth_token here
    // If we have valid token, isLoading is set to FALSE and isAuthenticatedUser is set to TRUE
  });

  return …

我正在使用 React Navigation 版本 4，在设置我的导航和所有屏幕并运行代码后，我面临以下问题：

TypeError: (0, _reactNavigation.default) 不是函数。

我的 Routes.Js 是 -

import React from 'react';
import createAppContainer from 'react-navigation';
import { createStackNavigator, HeaderBackButton } from 'react-navigation-stack';
import { Drawer } from './Drawer';
import LoginScreen from '../screens/LoginScreen';
import InitialScreen from '../screens/InitialScreen';
import LogoutScreen from '../screens/LogoutScreen';

const RootStack = createStackNavigator(
    {
        Drawer: { 
            screen: Drawer
        },
        LoginScreen: {
            screen: LoginScreen
        },
        LogoutScreen: {
            screen: LogoutScreen
        }
        InitialScreen: {
            screen: InitialScreen
        }
    },
    {
        initialRouteName: 'InitialScreen',
        headerMode: "none"
    }
)

const …

我在下面有一个嵌套的抽屉导航器，我在标题中使用了一个自定义组件：

header: props => {
    return <DrawerHeader {...props} />;
},

当我尝试从我的标题中的道具访问当前路线时，如下所示，标题是undefined，我怎样才能获得当前路线？

  render() {
    const {
      navigation,
      videos,
      search: {term},
      scene: {
        route: {routeName: title}, // undefined
      },
    } = this.props;
    return (
      <View>
        <View style={styles.container}>

航海家：

function DrawerStack() {
    return (
        <Drawer.Navigator>
            <Drawer.Screen
                name="VideoEpisodesScreen"
                component={VideoEpisodesScreen}
            />
            <Drawer.Screen name="TestYourselfScreen" component={TestYourselfScreen} />
            <Drawer.Screen name="MyResultsScreen" component={MyResultsScreen} />
            <Drawer.Screen name="AboutScreen" component={AboutScreen} />
            <Drawer.Screen name="TestsScreen" component={TestsScreen} />
            <Drawer.Screen
                name="BookmarkedVideosScreen"
                component={BookmarkedVideosScreen}
            />
        </Drawer.Navigator>
    );
}

export default function AppNavigator() {
    return (
        <NavigationContainer>
            <Stack.Navigator> …

我正在尝试将边框半径添加到底部栏，但是我想将容器颜色从默认更改为紫色。

我怎样才能做到这一点 ？

到目前为止我做了什么

我想要的是

代码：

tabBarOptions: {
      activeTintColor: colors.primary,
      inactiveTintColor: colors.black,
      showLabel: false,
      style: {
        borderWidth: 0.5,
        borderBottomWidth: 1,
        backgroundColor: 'white',
        borderTopLeftRadius: 20,
        borderTopRightRadius: 20,
        borderColor: colors.lightGrayText,
      },
    },

任何人都可以帮忙吗？

谢谢

如何在 React-native 中为 Stacked Screes 添加过渡效果？

<NavigationContainer>
    <Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Stocks" component={StocksScreen} />
    </Stack.Navigator>
</NavigationContainer>

是否有实现淡入/淡出效果的默认方法？

我想使用堆栈导航器中的通用标题按钮导航到特定屏幕。

 <NavigationContainer>
  <RootStack.Navigator 
    mode="modal"
    screenOptions={{
      headerTitleAlign: 'center',
      headerTitle: () => <SpreeLogo />,
      headerRight: (props) => <MaterialIcons style={{
        marginHorizontal: 10,
      }}
      onPress={() => console.log(props)}
      name="clear" size={28} color="black" />
    }}
  >

在标题右侧图标中，我想访问导航道具。我试过控制台记录道具，但没有道具作为导航。如何访问它？

我在抽屉导航器中有一个嵌套的堆栈导航器，我不希望用户能够从左侧滑动并打开抽屉，因为它们不在堆栈导航器的第一页上。我找到了一些答案，但它们似乎使用了一些官方文档中未使用的旧语法。

// stack navigator
const Items = () => {
    const IStack = createStackNavigator()
    return (
        <IStack.Navigator initialRouteName="Items" screenOptions={{ headerShown: false }} >
            <IStack.Screen  name="Items" component={ItemSelect} options={{ ...TransitionPresets.SlideFromRightIOS }} />
            <IStack.Screen name="Item" component={ItemScreen} options={{ ...TransitionPresets.SlideFromRightIOS }} />
        </IStack.Navigator>
    )
}
// drawer
const App = () => {
  return (
    <NavigationContainer theme={MyTheme}>
        <StatusBar barStyle="light-content" backgroundColor="#232931" />
        <Drawer.Navigator initialRouteName="Items">
            <Drawer.Screen name="Items" component={Items} />
        </Drawer.Navigator>
    </NavigationContainer>
  )
}

我想在堆栈导航器的第二个屏幕上禁用抽屉，即ItemScreen。

我正在学习使用此视频https://youtu.be/1hPgQWbWmEk进行编码，我完全按照那个人所做的去做，但是当我运行expo start然后在 Web 浏览器中运行时，会出现以下错误：

无法注册导航器。您是否使用“NavigationContainer”包装了您的应用程序？

到目前为止，这是我的代码

import { StatusBar } from 'expo-status-bar';
import * as React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import {navigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import { createMaterialTopTabNavigator } from 'react-navigation-tabs'

import LandingScreen from './Components/auth/landing';

const Stack = createStackNavigator();

export default function App() {
  return (
    <navigationContainer>
      <Stack.Navigator initialRouteName="Landing">
        <Stack.Screen name="Landing" component={LandingScreen} options={{headerShown: false}}/>
      </Stack.Navigator>
    </navigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: …