按钮无法在 react-native 中导航到另一个屏幕

Question

我正在使用 react-navigation 并且需要通过单击按钮登录从欢迎屏幕移动到登录页面，而它不工作。 https://i.stack.imgur.com/w9vfX.png

这是我的代码

1. app.js

 StyleSheet, Text, View } from 'react-native';

import { TabNavigator, DrawerNavigator, StackNavigator } from 'react-navigation';


import WelcomeScreen from './screens/WelcomeScreen';

import SigninScreen from './screens/SigninScreen';

import SignupScreen from './screens/SignupScreen';

import HomeScreen from './screens/HomeScreen';

import BusinessScreen from './screens/BusinessScreen';

import TechScreen from './screens/TechScreen';

import EducationScreen from './screens/EducationScreen';

import LifestyleScreen from './screens/LifestyleScreen';

import ProfileScreen from './screens/ProfileScreen';

import FavoritesScreen from './screens/FavoritesScreen';

import SettingsScreen from './screens/SettingsScreen';

export default class App extends React.Component {

render() {

const MainNavigator = StackNavigator({

  welcome: { screen: WelcomeScreen },

  signin: { screen: SigninScreen },

  signup: { screen: SignupScreen },

  main: {

    screen: DrawerNavigator({

      home: { screen: HomeScreen },

      business: { screen: BusinessScreen },

      tech: { screen: TechScreen },

      education: { screen: EducationScreen},

      lifestyle: { screen: LifestyleScreen },

      profile: {

        screen: StackNavigator({

          profile: { screen: ProfileScreen },

          settings: { screen: SettingsScreen }

        })
      }
    },
    )
  }
},)
return (
  <MainNavigator />


);


}
}

2。欢迎屏幕

 import React, { Component } from 'react';

import { View, Text} from 'react-native';

import Slides from '../components/Slides';

import PropTypes from 'prop-types';


const SLIDE_DATA = [

  { text: 'Welcome to JobApp', color: '#03A9F4' },

  { text: 'Use this to get a job', color: '#009688' },

  { text: 'Set your location, then swipe away', color: '#03A9F4' }

];

class WelcomeScreen extends Component {

render (){

  onSlidesComplete = () => {

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

  }
  return (

     <Slides data={SLIDE_DATA} onComplete={this.onSlidesComplete} />
  );
}
}

export default WelcomeScreen;

3. Slide.js

import React, { Component } from 'react';

import { View, Text, ScrollView, Button, Dimensions } from 'react-native';

import PropTypes from 'prop-types';

const SCREEN_WIDTH = Dimensions.get('window').width;

class Slides extends Component {

renderLastSlide(index) {

if (index === this.props.data.length - 1) {

  return (

    <Button raised onPress={this.props.onComplete}

     buttonStyle={styles.buttonStyle}

    title="Sign In"

> 登录

    </Button>

  );
}
}



renderSlides() {

  return this.props.data.map((slide, index) => {

    return (

      <View

        key={slide.text}

        style={[styles.slideStyle, { backgroundColor: slide.color }]}
      >


        <Text style={styles.textStyle}>{slide.text}</Text>


        {this.renderLastSlide(index)}

      </View>
    );
  });
}

render() {

  return (

    <ScrollView

      horizontal

      style={{ flex: 1 }}

      pagingEnabled
    >

      {this.renderSlides()}

    </ScrollView>

  );
}
}

const styles = {

slideStyle: {

  flex: 1,

  justifyContent: 'center',

  alignItems: 'center',

  width: SCREEN_WIDTH

},
textStyle: {

  fontSize: 30,

  color: 'white'

},

buttonStyle: {

backgroundColor: '#0288D1',

marginTop: 15

}

};



export default Slides;

Answer 1

在 WelcomeScreen 中，如果您使用像

这样的箭头功能

onSlidesComplete = () => {
    this.props.navigation.navigate('signin');
}

那么你必须使用onPress 像this.onSlidesComplete.bind(this) 或者如果你正在使用类似的函数

onSlidesComplete() {
   this.props.navigation.navigate('signin');
}

那么你必须像this.onSlidesComplete 一样使用onPress。简而言之，将以下代码替换为您现有的 WelcomeScreen

import React, { Component } from 'react';

import { View, Text} from 'react-native';

import Slides from '../components/Slides';

import PropTypes from 'prop-types';


const SLIDE_DATA = [

  { text: 'Welcome to JobApp', color: '#03A9F4' },

  { text: 'Use this to get a job', color: '#009688' },

  { text: 'Set your location, then swipe away', color: '#03A9F4' }

];

class WelcomeScreen extends Component {

render (){

  onSlidesComplete = () => {

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

  }
  return (

     <Slides data={SLIDE_DATA} onComplete={this.onSlidesComplete.bind(this)} />
  );
}
}

export default WelcomeScreen;