标签: react-navigation

我正在使用React Native构建移动应用程序,我正在使用React Navigation在我的应用程序中构建导航器.React导航为我提供了一个很好的方法来处理抽屉内的嵌套Tab栏,它也在Stack Navigator中.

问题是我需要指定组件,以便我可以将它们提供到Tab栏中.让我们说我们必须从API中获取一些类别,我们不知道数据中有多少类别.此外,我无法弄清楚即使我尝试在启动时获取数据,导航器和redux配置也会在启动时发生,这意味着应用程序必须知道这些选项卡导航器中的组件.我无法弄清楚即使我从API获取数据,我如何创建多个组件并停止应用程序配置.

下面的代码,演示了我如何实现标签栏.此代码在index.js中有效,因为正如我之前提到的,应用程序必须知道Navigator中的组件.

const TabStack = TabNavigator({
    Food: { screen: FoodStack},
    Drink : { screen: DrinkStack },
    HealthCare : { screen: SnackProducts },
    Snacks: { screen: SnackStack },
},
    {
        tabBarComponent : props => <CustomTabItems props={props}/>,
        tabBarPosition: 'top',
        animationEnabled : true,
        initialRouteName : 'Food',
        swipeEnabled: true,
        tabBarOptions : {
 
            scrollEnabled : true
        }
})

谢谢

这里是根代码

import { AppRegistry } from 'react-native';
import React from 'react';

import { Text, Image, ScrollView, View, List, ListItem, TouchableWithoutFeedback } from …

我想在Scroll上隐藏Header和TabNavigator选项卡.我怎么做？我想隐藏它们在Scroll上并在ScrollUp上显示它们.我的代码:

import React, { Component } from 'react';
import { View, Text, ScrollView, StyleSheet, TouchableOpacity} from 'react-native';

class ScrollTest extends Component {

    render(){
    const { params } = this.props.navigation.state;

        return(
            <View style={styles.container}>

               <ScrollView>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
                <View style={{styles.newView}}><Text>Test</Text></View>
               </ScrollView>

            </View>
        )
    }
}
const styles = StyleSheet.create({
  container:{
    flex:1, padding:5 
  },
  newView:{
     height: 200, backgroundColor:'green', margin:10
  }
})
export default ScrollTest;

我检查了Animated API的这个链接,但是无法弄清楚如何在onScoll中实现它？

所以标题HomeScreen和选项卡Tab1 …

我有以下路线结构:

StackNavigator
-StackNavigator
-TabNavigator
--Tab1
---Route 1 (Stack) (initial)
---Route 2 (Stack)

--Tab2
---Route 3 (Stack) (initial)
---Route 4 (Stack)

当我访问Tab1 -> Route 1 -> Route 2 -> Tab2并返回时Tab1,活动路径是2而不是initialRoute1.

我正在做以下事情:

tabBarOnPress: ({ scene }) => {
    const { route } = scene;
    const tabRoute = route.routeName;
    const { routeName } = route.routes[0];

    navigation.dispatch(NavigationActions.navigate({ routeName: tabRoute }));

    navigation.dispatch(NavigationActions.reset({
        index: 0,
        actions: [
            NavigationActions.navigate({ routeName }),
        ],
    }));
},

但问题是它首先显示Route 2然后导航到Route 1. …

navigation当屏幕与路由器位于不同的文件中时，定义屏幕道具类型的最佳方法是什么？假设我有一个文件，我在其中定义了路线：

//Router.tsx

type RootStackParamList = {
  Home: undefined;
  Profile: undefined;
}

const Stack = createStackNavigator<RootStackParamList>();

// Component rendering navigator
const Router = () => {
   .
   .
   .
}

然后我有单独的屏幕文件：

// Home.tsx


// here has to be the same RootStackParamList
// that we've already defined in Router.tsx
type = HomeScreenNavigationProp = StackNavigationProp<
  RootStackParamList,
  "Home"
>;

type Props: {
  navigation: HomeScreenNavigationProp
}


const Home = ({navigation}: Props) => {
  .
  .
  .
}

我是否必须RootStackParamList一遍又一遍地复制到每个屏幕或创建类似types.ts文件的内容并从那里导入它？有没有更好的方法来处理呢？我几乎在每个组件中都使用navigation。

我正在使用反应导航器创建屏幕，但当屏幕打开时我无法更改标题栏的选项

我的代码（App.js）：

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{
        headerTitleAlign: 'center',
        headerTitle: props => <LogoTitle {...props} />,
        headerRight: props => <HeaderRight {...props} />,
        headerStyle: {
          backgroundColor: '#F46A0D'
        },
        headerTintColor: '#fff',
      }}>
        <Stack.Screen name="Search" component={SearchScreen}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

我的 SearchScreen.js：

import React from 'react'
import { Text, View } from 'react-native'
import { Button } from 'react-native-paper'

const SearchScreen = ({ navigation }) => {
    navigation.setOptions = {
        headerTitle: props => <TextInput {...props} placeholder="Search" placeholderTextColor="#FFFF" style={{ …

我有一个使用react-navigation@5.1的react-native应用程序

我有一个带有多个选项卡的 TabNavigator（嵌套在堆栈导航器内）。每个选项卡都包含另一个 StackNavigator。这些选项卡堆栈之一具有列表屏幕和详细信息屏幕。

该应用程序设置为当应用程序在后台时接收推送通知。当用户按下推送通知时，它会打开应用程序并将其导航到详细信息/:id 屏幕。

问题是，如果用户尚未位于列表屏幕上，则后退按钮没有正确的历史记录并且不会出现。

我将如何确保详细信息屏幕的后退按钮始终将用户带到列表屏幕？

这是我的嵌套导航器的描述

<NavigationContainer>
 <Stack.Navigator>
    <Stack.Screen name="loading">
    <Stack.Screen name="auth">
    <Stack.Screen name="app">
      <Tabs.Navigator>
         <Tabs.Screen name="community">
           <Stack.Navigator>
              <Stack.Screen name="list">.  <- list
              <Stack.Screen name="detail"> <- detail
           </Stack.Navigator>
         </Tabs.Screen>
         <Tabs.Screen name="profile">
           <Stack.Navigator>
              <Stack.screen name="edit">  <- user may already be on this screen
              ...
           </Stack.Navigator>
         </Tabs.Screen>
         ... more tabs and stacks
    </Stack.Screen>
 </Stack.Navigator>
</NavigationContainer>

每当用户收到推送通知时，他们就已经位于选项卡导航器内的堆栈导航器之一上。同样，问题是用户可能位于个人资料选项卡内的编辑屏幕上。我需要将它们重定向到社区选项卡的详细信息屏幕，但确保历史记录包含后退功能的列表屏幕。

我正在构建一个反应本机应用程序，我想将滚动视图作为包装器添加到所有 UI 屏幕。我已将其包装Stack.Navigator在 ScrollView 中，但内容被剪切在屏幕底部，屏幕结束后没有可见的内容。请看下面的代码

应用程序.tsx

export default function App() {
  const [loading, setLoading] = useState(true);
  return loading ? (
    <AppSplashScreen onLoadComplete={() => setLoading(false)} />
  ) : (
    <NavigationContainer>
      <AuthProvider>
        <Provider>
          <ScrollView
            contentContainerStyle={{ minHeight: "100%", overflow: "visible" }}
            style={styles.container}
          >
            <Content />
          </ScrollView>
        </Provider>
      </AuthProvider>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    marginTop: 32,
    padding: 16,
    minHeight: "100%",
  },
});

内容.tsx

const Content = () => {
  return (
    <Stack.Navigator
      initialRouteName="LandingPage"
      screenOptions={{
        headerShown: false,
      }}
    > …

React Native 的新手。

react-router是一个流行的网络应用程序导航库。同一个库有一个包，它提供了用于在 RN 中导航的 API react-router-native，. 文档

读完 react-navigationpitch和anti-pitch后，我很好奇了解两者内部工作原理的区别。

这里和这里有类似的问题，但答案很固执，无法指出两者之间工作的差异。

在此索取有关这两个图书馆的任何有用信息！任何一个比另一个表现更好的特定用例也会有所帮助！

我正在使用 React Navigation 6 设置 URI 方案深度链接，以下是我的配置方式：

const linking = {
  prefixes: ["wagal://"],
  config: {
    ResetPassword: {
      path: "reset/password/:token",
      params: {
        token: null,
      },
    },
  },
};

function homeStack() {

  return (
    <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
      <Stack.Navigator>
        <Stack.Screen component={ResetPassword} name="ResetPassword" />
        //...
      </Stack.Navigator>
    </NavigationContainer>
  );
}

如果我去wagal://reset/password?token=123456789它会将我重定向到重置密码屏幕中的应用程序，但我无法从中获取令牌参数ResetPassword：

function ResetPassword({ route }) {
  const {token} = route.params;
  // ...
}

它抛出以下错误：

undefined is not an object (evaluating route.params.token)

但是如果我尝试使用下面的代码在PasswordReset屏幕中获取整个URL，它会显示带有令牌的整个URI：

  useEffect(() => {
    Linking.getInitialURL().then((url) => {
      console.log(`url`, url);
    }); …

使用 React Navigation (6)，我将底部选项卡设置为我的主导航器：

export function TabNavigator() {
  const getColor = ({ focused, color }) => (focused ? palette.blue : color)

  return (
    <Tab.Navigator screenOptions={{ headerShown: false }}>
      <Tab.Screen
        name="home"
        component={HomeScreen}
        options={{
          tabBarLabel: "Home",
          tabBarIcon: ({ size, ...rest }) => (
            <Ionicons name="home-outline" color={getColor(rest)} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="favourites"
        component={FavouritesScreen}
        options={{
          tabBarLabel: "Favourites",
          tabBarIcon: ({ size, ...rest }) => (
            <Ionicons name="heart-outline" color={getColor(rest)} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="about"
        component={AboutYouScreen}
        options={{
          tabBarLabel: "About you",
          tabBarIcon: ({ size, …