标签: react-navigation-stack

我想将仪表板加载为 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',
                }), …

我想模拟在我的功能组件中使用的 useNavigation 钩子。任何解决方法如何使用玩笑来模拟它？

import React from 'react';
import { useNavigation } from '@react-navigation/native';
import { TouchableOpacity } from 'react-native';

const MyComponent = () => {
  const { navigate } = useNavigation();

  const navigateToScreen = () => {
    navigate('myScreen', { param1: 'data1', param2: 'data2' })
  }

  return (<TouchableOpacity onPress={navigateToScreen}>
       Go To Screen
     </TouchableOpacity>)
}

如何测试在导航功能中传递的参数？

我有 3 个选项卡，每个选项卡都包含一组堆栈导航器。

1. 主堆栈

    const HomeNavigator = createStackNavigator();

    const HomeStackNavigator = ({navigation, route}) => {
      return (
        <HomeNavigator.Navigator>
          <HomeNavigator.Screen
            name="Home"
            component={Home}
          />
          <HomeNavigator.Screen
            name="Profile"
            component={Profile}
          />
          <HomeNavigator.Screen
            name="Settings"
            component={Settings}
          />
        </HomeNavigator.Navigator>
      );
    };

2. 存储堆栈

    const StoreNavigator = createStackNavigator();

    const StoreStackNavigator = ({navigation, route}) => {
      return (
        <StoreNavigator.Navigator>
          <StoreNavigator.Screen
            name="OurStore"
            component={Store}
          />
        </StoreNavigator.Navigator>
      );
    };

3. 社区堆栈

    const CommunityNavigator = createStackNavigator();

    const CommunityStackNavigator = ({navigation, route}) => {
      return (
        <CommunityNavigator.Navigator>
          <CommunityNavigator.Screen
            name="Community"
            component={Community}
          />
          <CommunityNavigator.Screen
            name="CommunityReply"
            component={CommunityReply}
            options={communityReplyOptions}
          />
          <CommunityNavigator.Screen …

我正在使用 React Native 应用程序，它在控制台中显示警告

import {createStackNavigator} from 'react-navigation-stack';
import {fromRight} from 'react-navigation-transitions';
const ApplyNowNav = createStackNavigator(
  {
    Home,
    Profile,
  },
  {
    headerMode: 'none',
    transitionConfig: () => fromRight(),
  }
);

'createStackNavigator' 中的警告弃用：

移除了 transitionConfig' 以支持新的动画 API

是否有解决此问题的解决方案？

我想将堆栈导航器中默认后退按钮的行为本地自定义到一个屏幕。

在详细信息中，假设堆栈上有 screen1|screen2，我想在按下按钮后将一些道具从 screen2 传递到 screen1。

我花了很多时间阅读 React 导航文档、在互联网上搜索和编码，但我无法做到这一点。

来自文档

在某些情况下，您可能希望比通过上述选项更多地自定义后退按钮，在这种情况下，您可以将 headerLeft 选项设置为将呈现的 React 元素 我知道问题涉及 goBack( ) headerRight 组件的函数。

我想用诸如 navigation.navigate("previousScreen",{{..props}}) 之类的内容覆盖与 headerLeft 后退按钮相关的默认函数 goBack() 。

而且（这非常重要！！）我想在特定屏幕本地使用此行为，而不是全局。

我尝试过类似的事情但不起作用。

 export default function App(){
 return(
 <NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="FirstScreen" component={FirstScreen}/>
    <Stack.Screen name="SecondScreen" component={SecondScreen} options={{headerLeft: () => (
        <HeaderBackButton
          onPress={() =>navigation.navigate("FirstScreen",{//stuff//})}
          title="Info"
          color="#fff"
        />
      ),}}/>
  </Stack.Navigator>
</NavigationContainer>
 )}

在我下面的代码中，当我使用 useNavigation() 时，它会给出一个错误，比如我的问题如何使用 useNavigation，请任何人都可以解决这个错误...错误：找不到导航对象。您的组件是否在导航器的屏幕内？我按照这里的代码https://rnfirebase.io/messaging/notifications#handling-interaction

import React, {useState, useEffect } from 'react';
import messaging from '@react-native-firebase/messaging';
import { NavigationContainer, useNavigation } from "@react-navigation/native";
import { createStackNavigator, HeaderTitle, } from "@react-navigation/stack";
const Stack = createStackNavigator();

function App(props) {
     const navigation = props.navigation
    //const navigation = useNavigation();
    const [initialRoute, setInitialRoute] = useState('Splash Screen');

    useEffect(() => {
        messaging().onMessage(remoteMessage => {
            navigation.navigate("Description Screen");
            console.log(props.navigation)
        });
    }, []);

    return (
        <NavigationContainer>
            <Stack.Navigator
                initialRouteName={initialRoute}
                headerMode="none"
                screenOptions={{
                    gestureEnabled: true,

                }}
            >

                <Stack.Screen name="Splash Screen" component={SplashScreen} />
                <Stack.Screen …

我收到错误:

不变违规:withNavigation只能用于导航器的视图层次结构.包装的组件无法从道具或上下文访问导航

我不知道为什么,因为我withNavigation在我的应用程序的其他组件中使用它,它的工作原理.我认为它所处理的组件与导致错误的组件没有区别.

码:

组件:

const mapStateToProps = (state: State): Object => ({
  alertModal: state.formControls.alertModal
})

const mapDispatchToProps = (dispatch: Dispatch<*>): Object => {
  return bindActionCreators(
    {
      updateAlertModalHeight: updateAlertModalHeight,
      updateAlertModalIsOpen: updateAlertModalIsOpen,
      updateHasYesNo: updateAlertModalHasYesNo
    },
    dispatch
  )
}

class AlertModalView extends Component<AlertModalProps, State> {
  render(): Node {
    return (
      <View style={alertModalStyle.container}>
        <PresentationalModal
          style={presentationalModalStyle}
          isOpen={this.props.alertModal.isOpen}
          title={this.props.alertModal.title}
          navigation={this.props.navigation}
          updateHasYesNo={this.props.updateHasYesNo}
          message={this.props.alertModal.message}
          updateAlertModalHeight={this.props.updateAlertModalHeight}
          viewHeight={this.props.alertModal.viewHeight}
          hasYesNo={this.props.alertModal.hasYesNo}
          yesClicked={this.props.alertModal.yesClicked}
          updateAlertModalIsOpen={this.props.updateAlertModalIsOpen}
        />
      </View>
    )
  }
}

// $FlowFixMe
const AlertModalViewComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(AlertModalView)

export default …

如果我设置headerTransparent: true通常在其下方呈现的其他内容，则会在其下方移动。我该如何避免呢？

我的代码：

export class RegisterScreen extends Component {
  static navigationOptions = {
    title: strings.header,
    headerTitleStyle: { color: '#fff' },
    headerTintColor: '#fff',
    headerTransparent: true,
  };
  render() {
    return <Display onSignUpPressed={() => {}} onHelpPressed={() => {}} />;
  }
}

具有透明标题（与:(重叠）：

没有透明标题：

我想使内容对齐，就好像标题具有高度一样。所以我希望内容像第二张图片一样，但要像第一张图片一样具有透明的标题。

寻找有关在 SwiftUI 中从导航堆栈中弹出多个视图的简单方法的一些指导。我有 4 个使用 NavigationLink 链接在一起的视图。在最后一个视图中，我想跳回初始 ContentView，从堆栈中弹出所有其他视图。我不想使用每个视图的 NavigationBar 上的“返回”按钮来实现这一点。
提前致谢。鲍勃。'''

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink(destination: BView()) {
                    Text("This is View A, now go to View B.")
                }
            }
        }
    }
}
struct BView: View {
    var body: some View {
        NavigationLink(destination: CView()) {
                Text("This is View B, now go to View C.")
        }
    }
}

struct CView: View {
    var body: some View {
        NavigationLink(destination: DView()) {
                Text("This …

我正在使用React Navigation x5，我正在StackNavigator加载一堆屏幕。unmountOnBlur我想在模糊时卸载一个特定的屏幕组件，以获得与使用DrawerNavigator.

我怎样才能做到这一点？