onPress 改变片段视图

Question

我正在使用 react-native，我有一个 NavigationDrawer.When 我按 ListItem 我更改了页面。我现在想做的是根据用户按下的按钮只更改一半的页面视图。

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

所以我想要的是根据 Press 切换到第 3 页、第 4 页.. 但第一个视图保持不变。

Answer 1

您可以按照如下逻辑切换页面：

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