onPress 更改片段视图答案

【问题标题】：onPress change fragment viewonPress 更改片段视图
【发布时间】：2017-06-02 12:50:59
【问题描述】：

我正在使用 react-native 并且我有一个 NavigationDrawer。当我按下 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页..但第一个视图保持不变。

【问题讨论】：

标签： javascript react-native react-router react-redux react-native-router-flux

【解决方案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>
    );
  }
}

【讨论】：