标签: react-navigation

我有以下两段代码：

自定义头文件.tsx

import { View, StyleSheet, Button } from 'react-native';
import { NavigationScreenProps } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';


export  const CustomHeader = ({ navigation }: NavigationScreenProps) => (
    <View style={[styles.container]}>
      <Icon
        name="md-menu"
        size={32}
        color="black"
        style={{ marginLeft: 10 }}
        onPress={() => navigation.openDrawer()}
      />
    </View>
  );

  const styles = StyleSheet.create({
    container: {
      borderBottomWidth: 2,
      height: 70,
      paddingTop: 20,
    },
  });

DetailScreen.tsx

import React from 'react';
import { Text, View, Button, Alert } from 'react-native';
import { NavigationScreenProps } from "react-navigation"; …

我希望能够使用 React Native Navigation v5 隐藏屏幕上的选项卡。

我一直在阅读文档，但似乎他们并没有为 v5 更新这个，它指的是 < v4 的做事方式。

这是我的代码：

import Home from './components/Home';
import SettingsScreen from './components/Settings';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';

const SettingsStack = createStackNavigator();
const ProfileStack  = createStackNavigator();

function SettingsStackScreen() {
    return (
        <SettingsStack.Navigator>
            <SettingsStack.Screen name="Settings" component={SettingsScreen} />
        </SettingsStack.Navigator>
    )
}

function ProfileStackScreen() {
    return (
        <ProfileStack.Navigator>
            <ProfileStack.Screen name="Home" component={Home} />
        </ProfileStack.Navigator>
    )
}

const …

我正在尝试向我的 react-navigation 抽屉中的每个屏幕添加一个图标，但该图标没有出现。

这是我的代码：

function Drawer() {
  return (
      <Drawer.Navigator 
       drawerStyle={styles.drawer}
        initialRouteName="Home" 
        drawerPosition='right'
        drawerContentOptions={{
        activeTintColor: 'white',
        inactiveTintColor: 'white',
        itemStyle: { alignItems:'flex-end' },
       }}>
        <Drawer.Screen name="AppTab" component={AppTab1} options={{ headerStyleInterpolator: forFade ,title:"home" ,icon:<Image source={require('./images/icons/plumbing-b.png')} style={styles.drawerActive}/> }} />
        <Drawer.Screen name="News" component={NotificationsScreen} options={{ headerStyleInterpolator: forFade ,title:"new items" icon:<Image source={require('./images/icons/plumbing-b.png')} style={styles.drawerActive}/> }} />
        
      </Drawer.Navigator>
    
  );
}


export function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          options={{
            headerTitleAlign:"center",
            headerRight: ({}) => <HeaderRight />,
            headerLeft: ({}) => <Search />
          }}
          component={Drawer}
          name="Drawer"
        />
        <Stack.Screen name="Product" component={Product} options={{title:"product"}} …

最近我开始使用 React Native0.61.5和 React navigation 5.x。现在我需要将父函数传递给子屏幕。例如，我想通过按下嵌套在 StackNavigator 中的 TabNavigator 选项卡中的按钮来更改导航栏图标。以前（导航版本 3.x）我getActiveChildNavigationOptions用于满足我的需要，但现在它已被删除。所以实现这个目标的唯一方法就是将自定义函数传递给子组件。

在示例代码中，我想从 更改XXXXXXXX为YYYYYYYYY：

const TabA = ({ route }) => (
  <View>
    <Text>Tab A</Text>
      <Button 
        title="Change header"
        onPress={() => route.params.setHeaderRightName("YYYYYYYYY")}/>
  </View>
)

const TabB = () => <><Text>Tab B</Text></>

const Tabs = createBottomTabNavigator();
const TabsNavigator = ({ navigation }) => {
  const [headerRightName, setHeaderRightName] = useState("XXXXXXXX");

  useLayoutEffect(() => navigation.setOptions({
    headerRight: () => <MyNavIcon name={headerRightName}/>
  }), [headerRightName]);

  return (
    <Tabs.Navigator>
      <Tabs.Screen name="tab-a" …

使用React Navigation是否可以使用headerMode定义某些路由而不使用其他路由？

我的大多数页面都不使用标题,我发现如何全局关闭它.

export const App = StackNavigator({
  PhotoView: {
    screen: Photos
  },
  ListView: {
    screen: List
  }
}, {
  headerMode: 'none'
});

但是,如果我想展示标题ListView,我该怎么做？

我从文档中尝试了几种方法,但没有运气.

我正在使用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 …

我想完全关闭当前组件,同时导航到react-native中的下一个组件.

我正在使用react- navigation在屏幕之间导航.

场景是,我的项目中有两个j,Login.js和Home.js.当用户登录到应用程序时,它会将凭据保存在AsyncStorage中.每次用户进入登录屏幕时,都会检查用户是否已登录.如果用户已登录,则应用程序将直接导航到主页,此操作我想完全关闭登录屏幕.

目前,通过我的实现,登录屏幕仍保留在导航堆栈中.当我从主页按回来时,应该完全关闭应用程序,不应再次使用登录屏幕重新启动.

这是我的StackNavigator代码:

const navigationStack = createStackNavigator(
  {
    Login: {
      screen: LoginScreen
    },
    Home: {
      screen: HomeScreen
    },
  },
); 

用于导航:

this.props.navigation.navigate('Home');

请告诉我我现有代码的错误？

我是React Native的新手,我正在研究React Native Navigation Docs.我在想:navigation.push()和之间有什么区别navigation.navigate()？

我试着自己找出来,但他们似乎完成了同样的事情......

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>