在标题栏中使用TouchableOpacityWrapper作为父容器,并手动传递触摸事件。
TouchableOpacityWrapper示例代码如下:
import React from 'react'; import {TouchableOpacity, View} from 'react-native';
class TouchableOpacityWrapper extends React.Component {
render() {
return (
使用TouchableOpacityWrapper作为标题栏容器:
import React from 'react'; import {ImageBackground, StyleSheet, Text, View} from 'react-native'; import TouchableOpacityWrapper from './TouchableOpacityWrapper';
class HeaderWithBackgroundImage extends React.Component {
render() {
return (
const styles = StyleSheet.create({ image: { width: '100%', height: 200, }, header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 16, paddingTop: 52, paddingBottom: 16, }, title: { color: '#fff', fontSize: 20, fontWeight: 'bold', }, button: { color: '#fff', fontSize: 16, fontWeight: 'bold', }, });
在上述示例代码中,TouchableOpacityWrapper组件的位置是在ImageBackground组件中,同时也包含Button或TouchableOpacity组件作为子组件。触摸事件会传递给TouchableOpacityWrapper组件,然后手动传递给子组件,以使它们可点击。