标签: react-navigation

使用时dangerouslyGetParent，如果从嵌套导航器中使用它，我永远不会发现它是虚假的。我做了一个小的代码潜水，如果它来自嵌套导航器，则无法发现它是错误的。我错了吗？嵌套导航器是否有可能给出 undefined/null from dangerouslyGetParent？

我正在使用以下方式创建导航系统

StackNavigator -> DrawerNavigator -> （屏幕 A、屏幕 B、屏幕 C）

屏幕A是初始路线

屏幕 A 到屏幕 B 使用

this.props.navigation.navigate("Screen B")  //Working Fine

屏幕 B 到屏幕 C 使用

this.props.navigation.navigate("Screen C")  //Working Fine

在屏幕 C 中

this.props.navigation.goBack() //Not Working

但

this.props.navigation.goBack(null) //It's going to Screen A instead of Screen B

这里出了什么问题。

请帮助我谢谢。

我的屏幕包含图像，并且我想拍摄带标题的全尺寸屏幕？

我只是使用position: "absolute"，但它无法包装标题，而且我无法使用，header: null因为我希望出现后退按钮！

那么我该如何处理这个问题呢？

我得到什么

我想要的是

提前致谢。

我知道如何将图标添加到自定义抽屉导航中，我想知道是否有任何方法可以直接向</Drawer.Navigator>or添加图标<Drawer.Screen/>？

例如这是我的代码：

const MyDrawer=()=>{

const Drawer=createDrawerNavigator();

return(

<NavigationContainer>
  <Drawer.Navigator
  initialRouteName='Main Page'
  >

<Drawer.Screen  name='Main Page' component={MainFunc} />


</Drawer.Navigator>

</NavigationContainer>
)

我有这样的代码：

 <Stack.Navigator headerMode='none'>
        <Stack.Screen name="WelcomeScreen" component={WelcomeScreen} />
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="Signup" component={Signup} />
        <Stack.Screen name="OnboardingSummary" component={OnboardingSummary} />  
        <Stack.Screen name="BottomTabs" component={BottomTabs} />
        <Stack.Screen name="Player" component={Player} />
    </Stack.Navigator>

这里BottomTabs是BottomTab BottomTabNavigator

const Tab = createBottomTabNavigator();
    <Tab.Navigator
        tabBar={props => <VialmaTabs {...props} />}
    >
        <Tab.Screen name="Profile" component={profileStack} />
        <Tab.Screen name="Home" component={HomeStack} />
    </Tab.Navigator>

主堆栈有 2 个屏幕UserList、UserDetails

function HomeStack() {
return (
    <RadioStack.Navigator headerMode='none'>
        <RadioStack.Screen name="UserList" component={UserList} />
        <RadioStack.Screen name="UserDetails" component={UserDetails} />
    </RadioStack.Navigator>
);

}

我现在在播放器屏幕上，我想重定向用户详细信息屏幕（它将跳过底部选项卡和 UseList。

我怎样才能实现这个目标？

我有一个堆栈导航，我想在 android 和 IOS 上启用滑动返回，这是我的代码

import {
  createStackNavigator,
  StackViewTransitionConfigs,
} from "react-navigation-stack";
import HomeScreen from "../../screens/Home/Home";
import CategoryScreen from "../../screens/Category/Category";
import SubCategoryScreen from "../../screens/SubCategory/SubCategory";
import ProductScreen from "../../screens/Product/Product";

const ShopStack = createStackNavigator(
  {
    Shop: {
      screen: HomeScreen,
      navigationOptions: {
        gesturesEnabled: true,
      },
    },
    Category: {
      screen: CategoryScreen,
      navigationOptions: {
        gesturesEnabled: true,
      },
    },
    SubCategory: {
      screen: SubCategoryScreen,
    },
    Product: {
      screen: ProductScreen,
      navigationOptions: {
        gesturesEnabled: true,
      },
    },
  },
  {
    headerMode: "none",
    transitionConfig: () => StackViewTransitionConfigs.SlideFromRightIOS,

    defaultNavigationOptions: {
      gesturesEnabled: true, …

在我的react-native应用程序中使用react-navigation v5和redux时，如何从actions文件触发导航？有没有更好的方法来做到这一点？当结果满足时，我想触发导航到下一个屏幕，但我无法使用 useNavigation()。谢谢。

我正在使用react-navigation v5，我正在尝试从一个页面导航到另一个页面，我有两个导航器，一个bottomTabNavigator和一个stack navigator。

确切地说，我在单击从后端获得的列表中的项目并将该列表中的元素发送到另一个页面后尝试进入页面，但我得到

\n

找不到变量导航

\n

这是我的组件订单，它呈现我的列表

import React from \'react\'\nimport { View, Text, TouchableOpacity } from \'react-native\'\nimport { CommonActions } from \'@react-navigation/native\'\n\nexport default Order = (orders) => {\n  const listOfOrder = orders.orders.map((item) => {\n    let date = new Date(item.created_at)\n    console.log(\'status\',item.status)\n    if(item.status === \'waiting for rider\' || item.status === \'in progress\' || item.status === \'cooking\') {\n      return (\n        <View>\n          <TouchableOpacity\n            style={styles.buttonOrderContainer}\n            // onPress={() => this.props.navigation.navigate(\'D\xc3\xa9tails\')}>\n            onPress={() => navigation.dispatch(CommonActions.navigate({\n              name:\'D\xc3\xa9tails\',\n              params: {\n                orderId: item.id\n              }\n            }))}>\n …

我正在使用react-navigation 5 创建一个react-native 应用程序。

假设我有一个像这样的屏幕组件：

import {View, Text} from 'react-native';

function TextScreen({navigation}) {
  const [text, setText] = useState(null);

  useEffect(() => {
    setText('Some text.');
    navigation.addListener('focus', () => {
      console.log('focus');
      console.log(text); // this is always null :/
    });
  }, []);

  return (
    <View>
      <Text>{text || 'No text'}</Text>
    </View>
  );
}

我不知道为什么每个焦点都console.log(text)显示出价值。null我希望文本仅出现null在第一个焦点中，但这种情况一直在发生。

但是当我将此组件更改为类组件时，一切都按预期工作：

import {View, Text} from 'react-native';

class TextScreen extends React.Component {
  state = {
    text: null
  }

  componentDidMount() {
    this.setState({text: 'Some text'});
    this.props.navigation.addListener('focus', () => …

我需要使用 React 导航选项卡和 tabBarComponent 创建自定义的可滚动顶部选项卡栏，而不使用任何其他第三方库。

const TopTabBar = createMaterialTopTabNavigator({
    Home: HomePage,
    Entertainment: EntertainmentNews,
    Business: BusinessStack,
    Music: MusicStack,
    Politics: PoliticsStack,
    Sports: SportsStack,
    Technology: TechnologyStack,
    WorldNews: WorldNewsStack
}, {
    tabBarComponent: (props) => <TopTabBarComponent {...props}/>
})

在此使用选项卡栏组件时，我可以创建顶部栏，但滑动屏幕时它不会滚动？

import React , { Component } from 'react'
import { Text, View, StyleSheet, FlatList, TouchableOpacity, Animated, Dimensions} from 'react-native'

interface Props {
    navigation?: any
}

interface State {
    //
}

export class TopTabBarComponent extends Component <Props, State>{
    flatListRef
    constructor(props: Props, state: State){
        super(props, state)
    }





    onPressItem …