标签: react-navigation

我正在使用react-navigation和 stack-navigator 来管理我的屏幕。

我正在使用的平台：

• 安卓
• 反应本机：0.47.1
• 反应导航：1.0.0-beta.11
• 模拟器和设备

我有一个屏幕，它充当模态形式，但它实际上是一个全屏。为什么“作为模态形式”的部分很重要？那是因为它是一种带有一些选项和透明背景颜色的模态菜单。

这是我的期望：

但我得到的是：

如您所见，在第二个示例中，背景颜色被完全替换，或者之前加载的组件被卸载，因此我想要达到的效果丢失了。 这个想法是能够像任何其他屏幕一样导航到这个屏幕。

如果使用 react-navigation 无法完成，我可以采取什么其他方式来完成？

该组件执行操作（redux），因为它是一个跨应用程序组件并在内部封装了许多机制和逻辑，这就是为什么我不能将它用作PureComponent使用此组件的中继。至少，使这个组件成为 PureComponent 将迫使我在许多其他组件中复制许多机制和逻辑。

为了这个问题，也为了避免问题太大，两个屏幕的风格完全相同，但推动的一个StackNavigation取代了backgroundColor，或者卸载了以前的屏幕。

这是我到目前为止所拥有的：

//PlaylistSelector.js
render() {
  //Just a full size empty screen to check and avoid bugs
  //Using red instead of transparent, works

  return (
    <View style={{ flex: 1, backgroundColor: 'transparent' }}>
    </View>
  );
}

//Navigator.js
import { StackNavigator } from 'react-navigation';

import Album from './Album'; //This is …

所以我有这个要求。要使标签导航具有这种精确的外观：

我用渐变和按钮设计标签栏没有问题。我使用以下代码创建了自己的自定义代码：

export default createBottomTabNavigator({
  (... routes here)
}, {
  initialRouteName: "Inspiration",
  tabBarComponent: props => <BottomTabBar {...props} />
})

但是现在我在使用中间按钮时遇到了麻烦。我的酒吧看起来像这样：

如果我删除删除此行的自定义标签栏：

tabBarComponent: props => <BottomTabBar {...props} />

然后现在我的中间按钮看起来应该如何，但当然，所有其他样式都丢失了：

这是我的 BottomTabBar 组件现在的样子：

import React from "react";
import { Image, StyleSheet, Text, TouchableOpacity } from "react-native";
import { TabBarBottomProps, NavigationRoute } from "react-navigation";
import LinearGradient from "react-native-linear-gradient";

const iconBag = require("./images/bag.png");

export default function BottomTabBar(props: TabBarBottomProps) {
  const {
    renderIcon,
    getLabelText,
    activeTintColor,
    inactiveTintColor,
    onTabPress,
    onTabLongPress,
    getAccessibilityLabel,
    navigation
  } = props;

  const { …

大家好，我想在 React Native 中创建时尚且自定义的底部标签导航，任何人都知道如何在上面创建此提及

React Navigation v3 具有initialRouteParams属性，用于将初始值传递给this.navigation.props。有没有办法设置初始路由参数以通过React Navigation v5 中的route.params访问？

function MainScreen({route, navigation}) {
    return (
        // how to pass default values to route in here?
        // route.params.userParam ?
        ...
    );
}

我在 Stack Navigator 中有一个 Tab Navigator，我希望将标题标题动态配置为所选选项卡的标题。就像有 3 个选项卡：主页、个人资料、添加项目，我希望标题在主页选项卡中为“主页”，在个人资料选项卡中为“个人资料”。

我尝试在根导航器上使用 onStateChange 并在选项卡导航器上使用 setOptions 但 onStateChange 仅在嵌套导航器中可用，而在嵌套导航器中不可用。

他们无论如何我可以存档吗？

导航器配置是：

const TabNav = (
   <Tab.Navigator>
      <Tab.Screen name='Home' component={HomeScreen}/>
      <Tab.Screen name='Profile' component={ProfileScreen}/>
      <Tab.Screen name='Add Item' component={AddItemScreen}/>
   </Tab.Navigator>
)

<NavigationContainer>
   <Stack.Navigator>
      <Stack.Screen name='Login' component={LoginScreen}/>
      <Stack.Screen name='App' component={TabNav}/>
   </Stack.Navigator>
</NavigationContainer>

<Stack.Navigator>
  {
    isLogin ? <ComponentA /> :  <ComponentB />
  }
</Stack.Navigator>


const ComponentA = () => (
 arrA.map( v => <Stack.Screen name={v.name} component={v.component} />)
)

const ComponentB = () => (
 arrB.map( v => <Stack.Screen name={v.name} component={v.component} />)
)

我想在组件A和组件B中使用一些钩子，所以我必须将它们用作功能组件，请问有什么帮助吗？

源代码

在使用 React Native API（Pressable）时，我注意到我的 React Native 应用程序（Android 版本）存在一些与性能相关的问题。当按下时，它会延迟几秒钟才做出响应，尤其是在使用它在屏幕之间导航时。我似乎不知道为什么会发生这种情况。它在 IOS 上完美运行。

我将 React Native 版本升级到 0.71.2。我希望这可以解决延迟问题，但事实并非如此

我想将仪表板加载为 react Native 底部选项卡中的活动选项卡。每当仪表板加载时导航，但每当我移动到仪表板时，它都会移动到收件箱屏幕，这是我的反应底部选项卡导航中的第一个元素。有没有办法在使用屏幕底部选项卡时创建默认屏幕？

我用于底部导航的代码是

 dashboard: {
        screen: createBottomTabNavigator({
            inbox: {
                screen: Chat,
                navigationOptions: ({ navigation }) => ({
                    title: 'Inbox',
                }),
            },
            favourite: {
                screen: Favourite,
                navigationOptions: ({ navigation }) => ({
                    title: 'Favourite',
                }),
            },
            dashboard: {
                screen: Dashboard,
                navigationOptions: ({ navigation }) => ({
                    title: 'Home',
                    initialRouteName: 'dashboard'
                }),
            },
            setting: {
                screen: SettingScreen,
                navigationOptions: ({ navigation }) => ({
                    title: 'Setting',
                }),
            },
            survey: {
                screen: NutritionistSurvey,
                navigationOptions: ({ navigation }) => ({
                    title: 'Survey',
                }), …

我怎样才能在本机反应中实现这一点？

到目前为止，我有这个，我想实现中间曲线。我不知道是用透明视图处理它还是完全切换到 SVG

这是tabBar组件

/* eslint-disable react/prop-types */
import React, { Component } from 'react'
import { TouchableOpacity, Text, StyleSheet, View } from 'react-native'
import { Colors } from 'App/Theme'

export default class TabBar extends Component {
  render() {
    let {
      renderIcon,
      getLabelText,
      activeTintColor,
      inactiveTintColor,
      onTabPress,
      onTabLongPress,
      getAccessibilityLabel,
      navigation,
      showLabel,
    } = this.props

    let { routes, index: activeRouteIndex } = navigation.state

    return (
      <View style={styles.tabBar}>
        {routes.map((route, routeIndex) => {
          let isRouteActive = routeIndex === activeRouteIndex
          let tintColor = …

我是本机反应的新手。我正在尝试使用 react-navigation 5 实现导航。我有两个屏幕主页和个人资料。这两个组件都收到了导航道具，但打字稿给了我以下错误

Binding element 'navigation' implicitly has an 'any' type.ts(7031)

如何摆脱这个错误。

先感谢您

注意 - 我正在使用打字稿

应用程序.tsx

import 'react-native-gesture-handler';

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

import Home from './screens/home'

const App  = () => {

  const ProfileScreen = ({}) => {
    return <Text>This is Jane's profile</Text>;
  };
  
  return (
    <NavigationContainer>

    <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={Home}
          
        />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>

  </NavigationContainer>

  );
};

主页.tsx

import React from 'react';
import …