CODEWITHSUNDEEP
javascriptiosreact-native
yogieputra
yogieputra

Reputation: 647

Ask - Routes in React Native App Intro

So I am playing around with this Component: react-native-app-intro

Here is my codes (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);

Here is the result from simulator: enter image description here

And this is my 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>
    )
  }
})

I want to wiring up, when user click button Done (Img: red marks), the page will change to my main.js
How can I do it in React Native?
Sorry for this noob question

Upvotes: 1

Views: 608

Answers (1)

NinetyHH
NinetyHH

Reputation: 1464

If you want to use just for iOS you can use the navigatorIOS (https://facebook.github.io/react-native/docs/navigatorios.html)

Or you can use the router flux for navigating (this one I'm using in most of my projects) https://github.com/aksonov/react-native-router-flux

So you can use something like:

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

Really easy tutorial how to use it:

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

Hope this is what you were looking for :)

Upvotes: 1

Related Questions