Question

我正在使用反应导航，需要通过点击欢迎屏幕上的按钮登录移动到登录页面，而不能正常工作。 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。 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} />
  );
}
}

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"

＆GT; 登录

    </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');
}

然后你必须使用像onPress这样的this.onSlidesComplete。简而言之，将以下代码替换为现有的 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;

按钮无法在react-native中导航到其他屏幕

1 个答案: