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>
    )
  }
})

我想接线，当用户点击按钮完成（Img：红色标记）时，页面将变为我的main.js
我怎么能在React Native中做到这一点？
对不起这个noob问题

Answer 1

如果您只想使用iOS，可以使用navigatorIOS（https://facebook.github.io/react-native/docs/navigatorios.html）

或者您可以使用路由器通量进行导航（这是我在大多数项目中使用的） 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

希望这就是你要找的东西：）

问 - React Native App简介中的路由

1 个答案: