React 路由器跳过所需的目标屏幕

Question

我不熟悉反应和路由。我有一个带有视频缩略图的主页，单击缩略图时我希望应用程序直接路由到视频页面，但是，它会不由自主地跳转到主页 -> 视频 -> 配置文件。因此，我必须单击后退按钮才能在我想要的屏幕上结束。

演示如下：

显然我没有正确理解路由，这是我的 router.js Auth 密钥堆栈用于登录注册并且按预期工作。 Main 键堆栈是我的问题一直存在的地方

render() {
    if (!this.state.isReady)
        return <Splash/>

    return (
        <Router>
            <Scene key="root" hideNavBar
                    navigationBarStyle={{backgroundColor: "#fff"}}
                    titleStyle={navTitleStyle}
                    backButtonTintColor={color.black}
            >
                <Stack key="Auth" initial={!this.state.isLoggedIn}>
                    <Scene key="Welcome" component={Welcome} title="" initial={true} hideNavBar/>
                    <Scene key="Register" component={Register} title="Register" back/>
                    <Scene key="CompleteProfile" component={CompleteProfile} title="Select Username" back={false}/>
                    <Scene key="Login" component={Login} title="Login"/>
                    <Scene key="ForgotPassword" component={ForgotPassword} title="Forgot Password"/>
                </Stack>
                <Stack key="Main" initial={this.state.isLoggedIn}>
                    <Scene key="Home" component={Home} title="Home" initial={true} type={ActionConst.REPLACE}/>
                    <Scene key="Video" component={Video} title="Video"/>
                    <Scene key="Profile" component={Profile} title="Profile"/>
                </Stack>
            </Scene>
        </Router>
    )
}

在我的主页上，我有一个 TouchableHighlight 和一个 onPress 运行的函数：Actions.Video() 尝试移动到视频页面。但如您所见，它会直接跳过该页面，转到“个人资料”页面。在我的视频页面上，我确实有一个 Button 元素和 Actions.Profile() 的 onPress 动作（这是我在点击可触摸高亮后结束的地方），但只有当我单击那个灰色 'Account' 按钮对吗？

编辑：添加 Video.js 组件：

import React, { Component } from 'react';
var { 
    View, 
    StyleSheet, 
    Alert, 
    Platform,
    Text,
    ScrollView,
    TouchableOpacity,
    PixelRatio,
    Dimensions,
    Image,
    TouchableHighlight,
    Linking,
    StatusBar } = require('react-native');

import { Button } from 'react-native-elements'
import {Actions} from 'react-native-router-flux';
import {connect} from 'react-redux';

import styles from "./styles"

import { actions as auth, theme } from "../../../auth/index"
const { video } = auth;

const { color } = theme;

//import YouTube, { YouTubeStandaloneIOS, YouTubeStandaloneAndroid } from 'react-native-youtube';

class Video extends Component {
    static navigationOptions = ({ navigation }) => {
        return {
            title: 'Video',
            headerStyle: { 
            backgroundColor: '#232323',
            borderBottomWidth: 0,
            },
            headerTitleStyle: { 
                color: 'white',
            },
        } 
    }
    state = {
      isReady: false,
      status: null,
      quality: null,
      error: null,
      isPlaying: true,
      isLooping: true,
      duration: 0,
      currentTime: 0,
      fullscreen: false,
      containerMounted: false,
      containerWidth: null,
    };
    onButtonPress = () => {
      //this.props.navigation.navigate('SpotifyLogin')
    }
  render() {
    const { navigate } = this.props.navigation;
    return (
      <ScrollView
        style={styles.container}
        onLayout={({ nativeEvent: { layout: { width } } }) => {
          if (!this.state.containerMounted) this.setState({ containerMounted: true });
          if (this.state.containerWidth !== width) this.setState({ containerWidth: width });
        }}
      >        
        <View style={styles.videoMetaContainer}>
            <Text style={styles.videoMetaTitle}>Louis the Child - Better Not (Lyrics) feat. Wafia</Text>
        </View>
        <View style={styles.watchYTBtnContainer}>
        <Button 
          onPress={Actions.Profile()}
          title='Account'
        >
        </Button>

        </View>
        <View style={styles.recentViewerList}>
        <ScrollView
            horizontal={true}
        >
            <View style={styles.recentViewer}></View>
            <View style={styles.recentViewer}></View>
        </ScrollView>
        </View>


      </ScrollView>
    );
  }
}

导出默认连接(null, {})(视频);

Answer 1

   <Button 
      onPress={Actions.Profile()}
      title='Account'
    >

onPress 属性应该是一个函数。在这种情况下，您已经声明了一个函数调用，它会在组件呈现后立即执行。

您应该将其声明为onPress={() => Actions.Profile()}或onPress={Actions.Profile}，以便仅在触发onPress事件时调用该函数。

Answer 2

我只是快速浏览了一下，老实说，我不知道在使用 flux 时需要在导入中包含对其他页面的原始引用。我看到，随着 React-native-router 流量的增加，您不仅仅依赖 Routes.js 文件来路由到正确的页面，因为您还拥有指向页面其他部分的链接，这些部分被硬编码到导入中.我和你的情况类似，只是我没有包含到其他页面的导入链接和路由数据。也许这就是我的问题所在。

React 路由器跳过所需的目标屏幕

React router jumps over desired target screen

react-native

react-native-router-flux