不使用 Navigation 切換畫面

//App.js
import React, { Component } from 'react';
import Abc from './src/Abc';

import {
  Platform,
  StyleSheet,
  Text,
  View,
  Button,
  Navigator,
  Modal,
} from 'react-native';


export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = { pageIndex : 0 }
  }


  page1(){this.setState({pageIndex:1});}
  //利用每次 setState 更新 render 指到不同內容

  render() {

    switch(this.state.pageIndex)
    {

      case 0 :

        return (
          <View style={styles.container}>
            <Text style={styles.welcome}>
            000000
            </Text>
            <Button
              onPress={ this.page1.bind(this)}
              title="Learn More"
              color="#841584"
            />
          </View>
        );


      case 1 :
          return <Abc/>//注意組件名稱一定要大寫

    }

  }


}




const styles = StyleSheet.create({

  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },

  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },

  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },

});

//Abc.js
import React, { Component } from "react";
import {
    Platform,
    StyleSheet,
    Text,
    View
  } from 'react-native';



export default class Abc extends React.Component {

  render() {
    
    return (
      <View style={styles.container}>
      <Text style={styles.welcome}>
      222222
      </Text>
    </View>
    );
    
  }
}
//注意:CSS一定要賦予文字高度大小,否則文字無法顯示

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});