我使用反应导航v5..安装了所有依赖项..现在我收到以上错误..失败：构建失败并出现异常。
* What went wrong:
Execution failed for task ':react-native-screens:compileDebugJavaWithJavac'.
> java.lang.reflect.UndeclaredThrowableException
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
* Get more help at https://help.gradle.org
Deprecated Gradle features were used in this build, making it incompatible with Gradle 6.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/5.5/userguide/command_line_interface.html#sec:command_line_warnings
我尝试使用如下方式提取参数useRoute。
const route = useRoute();
const { params } = route;
const {
id, name,
} = params;
一切正常，但 linter 突出显示id并name出现以下错误。
属性“id”在类型“object | ”上不存在 不明确的
我该如何克服这个问题。
typescript reactjs react-native react-navigation react-navigation-v5
我正在使用嵌套导航。据我所知，根导航器是 aStackNavigator并且 child 是DrawerNavigator无法通过 放置标题栏的DrawerNavigator。所以我通过做到了StackNavigator这一点，但当我导航DrawerNavigator. 如何更新标题标题DrawerScreen
根导航器：
<Stack.Navigator screenOptions={screenOptions} initialRouteName="Login">
<Stack.Screen name="Login" component={Login} />
// ...
<Stack.Screen // This is the screen that contains a child navigator
name="Main"
component={Main}
options={({navigation}) => ({
title: 'Main Page',
headerLeft: () => <MenuIcon stackNavigation={navigation} />,
})}
/>
</Stack.Navigator>
儿童导航器：
<Drawer.Navigator>
//...
<Drawer.Screen
name="Bids"
component={Bids}
options={{
title: text.bids, // This updates the title that in the drawer navigator menu not the header …react-native react-navigation react-navigation-drawer react-navigation-stack react-navigation-v5
withNavigation我有一个嵌套组件，我想在react-navigation v5中的嵌套组件中使用。
在以下简化示例中，用户使用 TextInput 更新标签状态，然后单击标题中的“保存”按钮。在提交函数中，当请求标签状态时，它返回原始值“”而不是更新后的值。
需要对导航 headerRight 按钮进行哪些更改才能解决此问题？
注意：当“保存”按钮位于渲染视图中时，一切都会按预期工作，只是当它位于标题中时则不然。
import React, {useState, useLayoutEffect} from 'react';
import { TouchableWithoutFeedback, View, Text, TextInput } from 'react-native';
export default function EditScreen({navigation}){
const [label, setLabel] = useState('');
useLayoutEffect(() => {
navigation.setOptions({
headerRight: () => (
<TouchableWithoutFeedback onPress={submit}>
<Text>Save</Text>
</TouchableWithoutFeedback>
),
});
}, [navigation]);
const submit = () => {
//label doesn't return the updated state here
const data = {label: label}
fetch(....)
}
return(
<View>
<TextInput onChangeText={(text) => setLabel(text) } value={label} />
</View>
)
}
根据Apple 文档，在 iOS 13 上呈现模式默认为UIModalPresentationAutomatic，通常映射到UIModalPresentationPageSheet样式。
同样，react-native-screens似乎支持各种选项，但到目前为止我还无法确定是否可以通过 react-navigation 传递它，或者 react-navigation 是否完全使用此代码路径。react-native-screens似乎默认为UIModalPresentationAutomatic，这让我相信 react-navigation 完全是在做其他事情。
是否可以Stack.Screen使用这些较小的模态类型来呈现这些组件Stack.Navigator？
这是一个演示该问题的简单 React Native 应用程序。
import "react-native-gesture-handler"
import * as React from "react"
import { Button, View, Text } from "react-native"
import { NavigationContainer } from "@react-navigation/native"
import { createStackNavigator } from "@react-navigation/stack"
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text>Home Screen</Text>
<Button …我正在尝试在 React Navigation v5 中制作自定义标头，我从 v3 开始就一直在使用它，但不知何故它在 v5 中不起作用。我的标题在向下滚动时成功显示其动画，但我无法单击标题内的任何内容，也无法检查我的标题。
const Stack = createStackNavigator();
class HomeStack extends Component {
render() {
return (
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={Home}
options={{
header: (props) => <HomeHeader {...props} />,
}}
/>
</Stack.Navigator>
);
}
}
这是我的标题组件
/* eslint-disable react-native/no-inline-styles */
import React, {Component} from 'react';
import {View, Text, StyleSheet, TouchableOpacity, Animated} from 'react-native';
class HomeHeader extends Component {
handleClickSearch = () => {
this.props.navigation.navigate('Search');
};
render() {
const {
scene: {
route: {params},
},
} …我已经使用createMaterialBottomTabNavigatorredux 来更改徽章文本。这是代码：
class Router extends React.PureComponent {
constructor(props) {
super(props);
this.state = {}
}
componentDidMount() {
this.props.appAct()
this.props.getCartAct()
}
HomeStack = () => (
<Stack.Navigator headerMode={'none'}>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Product" component={ProductStack} />
</Stack.Navigator>
)
CartStack = () => (
<Stack.Navigator headerMode={'none'}>
<Stack.Screen name="Cart" component={CartScreen} />
<Stack.Screen name="Product" component={ProductStack} />
</Stack.Navigator>
)
render() {
let { internet, showIntro } = this.props;
if (!internet) return <NoInternetScreen />
if (showIntro) return <AppIntro />
return (
<NavigationContainer ref={navigationRef}>
<Tab.Navigator
style={{ …我正在 React Native 和 Expo 中练习一个非常基本的项目。该项目不使用弹出的项目，因此我无法直接与特定平台（Android 和 iOS）的项目交互，我希望它保持这种状态。
几天前，当我尝试编辑登录表单的字段时，我在 Android 中看到了一个问题。事实证明，在键盘打开之前，出现了一个白色的小闪光。正如我在 GitHub 上阅读的几乎所有 Expo 页面一样，这是因为应用程序具有应用程序的空白视图，并且可以在这些平台的项目中更改此行为（我之前提到过，我没有）并且我本周一直在寻找一种方法来实现这一目标，然后我找到了这个文档，但我仍然不知道这是否有效以及是否可以更改所述根视图颜色： https: //docs.expo.io/版本/最新/sdk/注册根组件/
键盘问题的视频：https://i.stack.imgur.com/uOvZl.jpg
我遇到的错误与此视频中的错误相同，但我不知道是否有办法解决该问题，因为我必须使用它来React Navigation v5创建导航堆栈。另外，我使用黑色作为背景，这使得这种行为更加明显。
我尝试过不同的方法，例如更改键盘的布局模式（但这使我失去了滚动的能力），也使其对视图的响应更加灵敏，KeyboardAvoidingView但这ScrollView是不可能的。
这是我正在使用的：
这是一些代码：
package.json dependencies
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start"
},
"dependencies": {
"@react-native-community/masked-view": "0.1.10",
"@react-navigation/bottom-tabs": "^5.10.6",
"@react-navigation/native": "^5.8.6",
"@react-navigation/stack": "^5.12.3",
"expo": "~39.0.2",
"expo-status-bar": "~1.0.2",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.4.tar.gz",
"react-native-gesture-handler": "~1.7.0",
"react-native-reanimated": "~1.13.0",
"react-native-safe-area-context": "3.1.4",
"react-native-screens": "~2.10.1",
"react-native-web": "~0.13.12"
}, …我一直在使用 Expo 和 React-navigation 在移动设备和桌面设备上进行开发，到目前为止，它非常棒！但是，我需要在移动设备和桌面抽屉中显示底部选项卡。我在较小和较大的屏幕上应用不同的导航器时遇到了一些麻烦。我们希望在移动设备中显示选项卡，并在大屏幕中显示侧边栏。移动设备和大屏幕之间的路线结构不同。例如： 在移动屏幕中：
我们可以做的第一件事是进行条件渲染（基于尺寸），但是会出现几个问题：
我正在考虑创建某种导航包装器，它将接收导航和当前屏幕作为参数。但对此并不确定。如果大家有什么想法或经历过，请分享！提前致谢！