我花了超过 si 个小时尝试将 DrawerNavigator 的背景更改为透明，但没有成功。当我在主要组件中更改它时写入它可以工作

const MainTabBarDrawer = DrawerNavigator({
Home:{
    screen:MainTabNavigator,
},

},{
drawerWidth: 200,
drawerPosition: 'right',
// contentComponent: props => <Text style={{color:'white'}} >text 
</Text>,
drawerBackgroundColor: 'yellow',
//backgroundColor:'transparent',
// style: {
// //backgroundColor: 'transparent',
// flex: 1
// },
// contentOptions: {
//     style: {
//     backgroundColor: 'transparent',
//     flex: 1
// }


},
{
style: {
    backgroundColor: 'transparent',
        flex:1
}
}
)


class App extends Component{

render()
{
return(<MainTabBarDrawer style={{backgroundColor: 'transparent'}}/>)
//return(<Login/>)
}

}

虽然上述方法可行，但我的布局非常复杂，我不希望抽屉出现在我的所有视图中。那么有人知道我是否可以直接更改 DrawerNavigator 的背景而不将其渲染为组件吗？

我正在 React Native 中进行玩笑测试，并且在我的项目中使用了 Snackbar。在执行 jest 时，我收到此错误。\'LENGTH_LONG\' 是小吃栏中的内置变量。我发布了我使用“LENGTH_LONG”变量和错误消息的位置。任何人请帮助我

 jest "login"\r\n\r\n FAIL  __tests__\\jest\\LoginScreen.test.js\r\n  \xe2\x97\x8f Test suite failed to run\r\n\r\n    TypeError: Cannot read property \'LENGTH_LONG\' of undefined\r\n\r\n      10 |     ScrollView\r\n      11 | } from "react-native";\r\n    > 12 | import Snackbar from \'react-native-snackbar\';\r\n      13 |\r\n      14 | import { connect } from "react-redux";\r\n      15 | import { Button, Text, Divider } from "react-native-elements";\r\n\r\n      at Object.<anonymous> (node_modules/react-native-snackbar/lib/index.js:1:252)\r\n      at Object.<anonymous> (src/screens/login/loginScreen.js:12:26)\r\n      at Object.<anonymous> (__tests__/jest/LoginScreen.test.js:3:18)\r\n\r\nTest Suites: 1 failed, 1 total\r\nTests:       0 total\r\nSnapshots:   0 …

我正在组装一个 react-native 应用程序，并希望顶部有标签。我正在为选项卡使用createMaterialTopTabNavigator，这很好用。但是，当我在最新的 iPhone 模拟器上运行该应用程序时，标签会渗入传感器栏。在试图解决这个问题时，人们建议使用safeareaview，但它似乎没有关于如何将其与外部选项卡父级结合的任何信息。

你们能提供的任何帮助我将不胜感激。谢谢

我使用 const 来显示组件。现在，当我对 const 中的按钮使用反应导航时，我看到了这个错误：未定义不是一个对象（评估 '_this.props.navigation.navigate'）

我尝试将 navigation={this.props.navigation} 添加到按钮以允许导航，但没有奏效。

const WomenTab = () => (
    <View>
      <Button onPress={() => {
                        this.props.navigation.dispatch(StackActions.reset({
                          index: 0,
                          actions: [
                            NavigationActions.navigate({ routeName: 'Wallet' })
                          ],
                        }))
                      }}>
          <Text>Click</Text>
      </Button>
    <View>
);

库链接：http : //github.com/react-native-community/react-native-tab-view

我正在使用从react-native-navigaton到我的应用程序中的导航的bottomTabs导航器。然而，每当我有一个TextInput字段时，底部选项卡都会被向上推。

当显示键盘时隐藏底部选项卡的可能方法是什么？

在我的应用程序中，我有Login Screen、ForgotPassword Screen和SignUp Screen。在注册屏幕中，我使用react-native-swiper来显示注册过程的三个步骤的幻灯片。我在StackNavigator 中包装了这些屏幕，并将这个StackNavigator作为根组件呈现在我的App.js 中。

这是我的StackNavigator：

路由器.js

import { createDrawerNavigator, createAppContainer, createStackNavigator } from 'react-navigation';
import Login from './src/containers/Login';
import SignUp from './src/containers/SignUp';
import ForgotPassword from './src/containers/ForgotPassword';

const AuthStackNavigator = createStackNavigator({
    Login: {
        screen: Login
    },
    ForgotPassword: {
        screen: ForgotPassword
    },
    SignUp: {
        screen: SignUp
    },
});

const Router = createAppContainer(AuthStackNavigator)

export default Router

应用程序.js

import React, { Component } from …

我的问题是我无法将函数作为参数传递给react-navigation v5 中的标头组件。

从filtersscreen.js中下面给定的代码中，我想将savefilters传递给navigation.js中的headerRight。

我可以在log-1中查看保存参数。但是为什么我无法在 log-2（即 FilterNavigator）中获取保存参数。

当我使用 setParams() 时，我收到警告 - “在导航状态中发现不可序列化的值，这可能会破坏持久化和恢复状态等使用。如果您传递了不可序列化的值（例如函数、类），则可能会发生这种情况params 中的实例等。如果您需要在选项中使用带有回调的组件，则可以使用 'navigation.setOptions' 代替。请参阅https://reactnavigation.org/docs/troubleshooting.html#i-get-the-warning -我们在导航状态中找到了不可序列化值以获取更多详细信息。”

当我使用navigation.setOptions({ save: savefilters })时，我无法在route.params.save中找到保存

我是反应原生新手，我请求你帮助我解决这个问题。

我阅读了文档React Navigation v5。

我记录了下面的输出。谢谢。

导航.js

const FiltersNavigator = props => {
  return (
    <screen.Navigator initialRouteName="Filters">
      <screen.Screen
        options={{
          title: 'Filters',
          headerRight: () => (
            <View>
              <TouchableNativeFeedback>
                <MaterialCommunityIcons
                  name="content-save"
                  color="white"
                  size={28}
                  style={{padding: 15}}
                  onPress={() => console.log(props)} //log-2 attached below
                />
              </TouchableNativeFeedback>
            </View>
          ),
        }}
        name="Filters Meals"
        component={FiltersScreen}
      />
    </screen.Navigator>
  );
};

FilterScreen.js

const FilterSwitch = props => …

在 Android 上react-native-navigation，当将新屏幕推送到堆栈时，我希望过渡动画从左到右（反之亦然，对于 RTL 布局）在 iOS 中这是默认设置，而在 Android 上 - 它似乎以交叉溶解动画显示。如何实现 iOS 中的水平动画？

我对此有非常简单的用例，基本上，如果屏幕聚焦，我希望该函数运行，如果没有，则不运行。

  const isFocused = useIsFocused();

  const onViewRef = useRef(({ viewableItems }) => {

    if (!isFocused) return;

    //code to run
  });

这是该屏幕的堆栈：

const MyStack = () => {
  return (
    <Stack.Navigator headerMode="none">
      <Stack.Screen
        component={MyStackComponent}
        name="My"
      />
    </Stack.Navigator>
  );
};

这是 tabNavigator 中使用的堆栈

     <Tab.Screen
        component={MyStack}
        name="My"
      />
      <Tab.Screen
          component={Other Stack}
          name="Other"
        />
      

所以基本上每当我进入应用程序上的任何其他选项卡时，使用 useIsFocused 挂钩的文件都应该返回 false，对吧？因为现在无论如何它都会返回 true，而且我不能让该函数一直运行。有什么指点吗？

我正在尝试构建 Playground 应用程序以react-native-navigation使用此处的说明。一个简单的npm install失败，因为对等依赖项具有react: "*"和react-native: "*"，所以今天（2021 年 1 月）NPM 尝试安装react@17.0.1，但也尝试安装react-native@0.63.4，这需要react@16.13.1. 我收到以下错误：

npm ERR! While resolving: react-native-navigation@7.7.0
npm ERR! Found: react@17.0.1
npm ERR! node_modules/react
npm ERR!   peer react@"*" from the root project
...
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"16.13.1" from react-native@0.63.4
npm ERR! node_modules/react-native
npm ERR!   peer react-native@"*" from the root project
npm ERR!   peer react-native@">=0.59" from @react-native-community/datetimepicker@2.6.2
npm …