如何在視圖內部制作導航按鈕，並在視圖內部添加圖像和標題

Question

如果有人觸摸視圖，則必須打開另一個頁面。 但在此視圖中，還存在圖像和文本。 因此，我在互聯網上進行了搜索，但是找不到很好的解決方案。

我試圖在視圖中放置一個按鈕，但是它不起作用。

  export default class HomeScreen extends React.Component { render() { return ( <View style={styles.container}> <View style={styles.containerbetween}> <View style={[styles.box, styles.box1]}> <Image style={styles.image} source={require('../assets/images/Pooplog.png')} /> <Text style={styles.white}>Poep log</Text> </View> <View style={[styles.box, styles.box2]}> <Image style={styles.image} source={require('../assets/images/Agenda.png')} /> <Text style={styles.white}>Kalender</Text></View> </View> <View style={styles.containerbetween}> <View style={[styles.box, styles.box3]}> <Image style={styles.image} source={require('../assets/images/Analyse.png')} /> <Text style={styles.white}>Analyse</Text></View> <View style={[styles.box, styles.box4]}> <Image style={styles.image} source={require('../assets/images/Tips.png')} /> <Text style={styles.white}>Tips en weetjes</Text></View> </View> </View> ) } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> 

Answer 1

使用TouchableOpacity ：

<TouchableOpacity onPress={()=> {//navigate here}} style={[styles.box, styles.box1]}>
                <Image
                    style={styles.image}
                    source={require('../assets/images/Pooplog.png')}
                />
                  <Text style={styles.white}>Poep log</Text>

</TouchableOpacity>