Question

我正在使用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>
    );
  }
}

所以我想要的是取决于对第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>
    );
  }
}

onPress更改片段视图

1 个答案: