onPress change fragment view

Question

I am using react-native and i have a NavigationDrawer.When i press ListItem i change the page. What i want to do now is to change only half of page's view depending on what user presses.

export default class Some extends Component {

  render() {

    return (
      <View style={styles.View1}>
        <View style={styles.hed}>
          <View style={styles.imageview}>
            <Image style={styles.img} source={require('../images/logo3.png')} />
          </View>
        </View>
        <View style={styles.View2}>
          <Page2/> 
        </View>
      </View>
    );
  }
}

So what i want is depending onPress change to Page 3, Page4.. BUT the first view to stay constant.

score 0 · Accepted Answer · answered Jun 02 '17 at 14:07

You can switch the pages with a logic like this:

export default class Some extends Component {
  constructor() {
    // You define the first page seen
    this.state = { currentPage: 1 };
  }

  onPress = () => {
    // Here your logic to choose the page with:
    this.setState({ currentPage: ... });
  }

  render() {
    // All of your pages
    const pages = {
      1: <Page1 />,
      2: <Page2 />,
      3: <Page3 />,
    };
    const { currentPage } = this.state;

    return (
      <View style={styles.View1}>
        <View style={styles.hed}>
          <View style={styles.imageview}>
            <Image style={styles.img} source={require('../images/logo3.png')} />
          </View>
        </View>
        <View style={styles.View2}>
          {/* Display the selected page */}
          {pages[currentPage]} 
        </View>
      </View>
    );
  }
}

onPress change fragment view

1 Answers1