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

【问题标题】：React router jumps over desired target screenReact 路由器跳过所需的目标屏幕
【发布时间】：2018-04-21 00:48:50
【问题描述】：

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

下面的演示：

显然我没有正确理解路由，这是我的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 元素和 onPress 动作 Actions.Profile() （这是我点击可触摸突出显示后结束的地方）但只有当我点击那个灰色的“帐户”时才会触发按钮对吗？

编辑：添加 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, {})(视频);

【问题讨论】：

你能发布你的整个Video组件吗？
@riwu 确定，我刚刚为你添加了它！

标签： react-native react-native-router-flux

【解决方案1】：

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

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

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

【讨论】：

是的就是这样，奇怪的是即使没有按下它也会运行动作，感谢您发现我的错误

【解决方案2】：

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

【讨论】：