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