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>

如何在视图内部制作导航按钮，并在视图内部添加图像和标题

1 个答案: