javascript - 问 - React Native App 介绍中的路由

Question

所以我正在玩这个组件:react-native-app-intro

这是我的代码(index.ios.js):

import React, { Component } from 'react';
import { AppRegistry, Alert } from 'react-native';
import AppIntro from 'react-native-app-intro';

import Main from './main';


class coba_reactIntro extends Component {
  onSkipBtnHandle = (index) => {
    Alert.alert('Skip');
    console.log(index);
  }
  doneBtnHandle = () => {
    Alert.alert('Done!');

  }
  nextBtnHandle = (index) => {
    Alert.alert('Next');
    console.log(index);
  }
  onSlideChangeHandle = (index, total) => {
    console.log(index, total);
  }
  render() {
    const pageArray = [{
      title: 'Page 1',
      description: 'Description 1', 
      imgStyle: {
        height: 80 * 2.5,
        width: 109 * 2.5,
      },
      backgroundColor: '#fa931d',
      fontColor: '#fff',
      level: 10,
    }, {
      title: 'Page 2',
      description: 'Description 2', 
      imgStyle: {
        height: 93 * 2.5,
        width: 103 * 2.5,
      },
      backgroundColor: '#a4b602',
      fontColor: '#fff',
      level: 10,
    }];
    return (
      <AppIntro
        onNextBtnClick={this.nextBtnHandle}
        onDoneBtnClick={this.doneBtnHandle}
        onSkipBtnClick={this.onSkipBtnHandle}
        onSlideChange={this.onSlideChangeHandle}
        pageArray={pageArray}
      />
    );
  }
}

AppRegistry.registerComponent('coba_reactIntro', () => coba_reactIntro);

这是模拟器的结果:

这是我的 main.js

import React, { Component } from 'react';
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  StyleSheet
} from 'react-native';

const styles = StyleSheet.create({
  container:{
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 40
  },
  button:{
    textAlign: 'center'
  },
});


module.exports = React.createClass({ 
  render(){
    return(
      <View style={styles.container}>
          <Text style={styles.button}>Hello</Text>
        </View>
      </View>
    )
  }
})

我想连接起来，当用户点击按钮完成(图片:红色标记)时，页面将更改为我的 main.js
我怎样才能在 React Native 中做到这一点？
抱歉这个菜鸟问题

Answer 1

如果你只想在 iOS 上使用，你可以使用 navigatorIOS ( https://facebook.github.io/react-native/docs/navigatorios.html )

或者你可以使用 router flux 来导航(我在我的大部分项目中都使用这个) https://github.com/aksonov/react-native-router-flux

所以你可以使用类似的东西:

export default class PageOne extends Component {
  render() {
    return (
       <Text onPress={Actions.pageTwo}>This is PageOne!</Text>
    )
  }
}

非常简单的教程如何使用它:

https://github.com/aksonov/react-native-router-flux/blob/master/docs/MINI_TUTORIAL.md

希望这就是您要找的:)