Question

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

以下演示：

显然我不能正确理解路由，这里是我的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，{}）（视频）;

Answer 1

df.groupby(['result','my_classification']).head(1)

<Button onPress={Actions.Profile()} title='Account' >道具应该是一个功能。在这种情况下，您已声明了一个函数调用，该函数会在组件呈现后立即执行。

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

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

1 个答案: