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

因此，我想要的是取决于按第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> 
    ); 
    } 
}