Reactjs 为什么不是'；我的图像背景在React Native中的TouchableOpacity中是否相同？

在我的应用程序中，我有一个屏幕，显示三行，其中包含一些文本和背景图像

我过去只放图像，但我希望能够按图像执行操作。这是我以前的代码，工作正常：

import React, { Component } from 'react'
import { ScrollView, View } from 'react-native'
import { useTranslation } from 'react-i18next';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { useNavigation } from '@react-navigation/native';
import SelectorBox from '../../components/workout/SelectorBox';

const EXERCISE = require('../../assets/workout/exercise.jpg');
const MUSCLES = require('../../assets/workout/muscles.jpg');
const ROUTINE = require('../../assets/workout/routine.jpg');

export default function SelectorScreen() {
    const {t} = useTranslation();
    const navigation = useNavigation();

    return (
        <View style={{flex: 1, flexDirection: 'column', backgroundColor: "blue"}}>
            <SelectorBox image={MUSCLES} title={t('workout.muscleGroups')} />
            <SelectorBox image={EXERCISE} title={t('workout.exercises')} />
            <SelectorBox image={ROUTINE} title={t('workout.routines')} />
        </View>
    )
}

import React，{Component}来自“React”
从“react native”导入{ScrollView，View}
从“react-i18next”导入{useTranslation}；
从“反应本机手势处理程序”导入{TouchableOpacity}；
从'@react-navigation/native'导入{useNavigation}；
从“../../components/workout/SelectorBox”导入SelectorBox；
const EXERCISE=require（'../../assets/workout/EXERCISE.jpg'）；
const MUSCLES=require（'../../assets/workout/MUSCLES.jpg'）；
const ROUTINE=require（'../../assets/workout/ROUTINE.jpg'）；
导出默认函数选择器屏幕（）{
const{t}=useTranslation（）；
const navigation=useNavigation（）；
返回(
)
}

从“React”导入React
从“react native”导入{文本、视图、图像背景、样式表、维度}
从“反应本机手势处理程序”导入{TouchableWithoutFeedback}
导出默认功能SelectorBox（道具）{
返回(
{props.title}
)
}
const styles=StyleSheet.create({
背景：{
flexDirection:“列”，
对齐项目：“居中”，
为内容辩护：“中心”，
弹性：1，
宽度：尺寸。获取（'窗口'）。宽度，
},
标题栏：{
宽度：尺寸。获取（'窗口'）。宽度，
身高：60，
背景颜色：“#ffb623”，
为内容辩护：“中心”
},
标题：{
重量：“900”，
字体大小：32，
对齐自我：“中心”，
}
})

但是，当我更改代码时，我所有的SelectorBox都会消失

export default function SelectorBox(props) {
    return (
        <TouchableWithoutFeedback style={styles.option}>
            <ImageBackground source={props.image} style={styles.background}>
                <View style={styles.titleBar}>
                    <Text style={styles.title}>{props.title}</Text>
                </View>
            </ImageBackground> 
        </TouchableWithoutFeedback>
    )
}

const styles = StyleSheet.create({
    option: {
        flex: 1,
        width: Dimensions.get('window').width,
        // backgroundColor: 'red'
    },
    background: {
        flexDirection: "column",
        alignItems: 'center',
        justifyContent: 'center',
        flex: 1,
        width: Dimensions.get('window').width,
    },
    titleBar : {
        width: Dimensions.get('window').width, 
        height: 60, 
        backgroundColor: '#ffb623',
        justifyContent: 'center'
    },
    title: {
        fontWeight: "900",
        fontSize: 32,
        alignSelf: 'center',
    }

})

导出默认函数SelectorBox（道具）{
返回(
{props.title}
)
}
const styles=StyleSheet.create({
选项：{
弹性：1，
宽度：尺寸。获取（'窗口'）。宽度，
//背景颜色：“红色”
},
背景：{
flexDirection:“列”，
对齐项目：“居中”，
为内容辩护：“中心”，
弹性：1，
宽度：尺寸。获取（'窗口'）。宽度，
},
标题栏：{
宽度：尺寸。获取（'窗口'）。宽度，
身高：60，
背景颜色：“#ffb623”，
为内容辩护：“中心”
},
标题：{
重量：“900”，
字体大小：32，
对齐自我：“中心”，
}
})

我希望能够保持它像这个屏幕截图一样无处不在。现在，屏幕是空的。（蓝色背景，这是我设置的）

你能指引我吗？

---

尝试分步调试问题

尝试从

react native

而不是

react native手势处理程序导入
TouchableOpacity
。如果从选项样式中取消注释，
backgroundColor:“red”
颜色是否有效

更改此项：
从“反应本机手势处理程序”导入{TouchableWithoutFeedback}

要从RN导入：
从'react native'导入{TouchableWithoutFeedback}

你应该考虑使用而不是：

可触摸且无反馈

不要使用，除非你有一个非常好的
原因。所有对媒体做出反应的元素都应该有一个视觉效果
触摸时的反馈

TouchableWithoutFeedback仅支持一个子项。如果你想
多个子组件，将它们包装到视图中。重要的是
TouchableWithoutFeedback通过克隆其子对象并应用
响应者支持它。因此，要求任何中间人
组件通过这些道具传递到底层的React Native
组成部分

尝试按步骤调试问题

尝试从
react native
而不是
react native手势处理程序导入
TouchableOpacity
。如果从选项样式中取消注释，
backgroundColor:“red”
颜色是否有效

更改此项：
从“反应本机手势处理程序”导入{TouchableWithoutFeedback}

要从RN导入：
从'react native'导入{TouchableWithoutFeedback}

你应该考虑使用而不是：

可触摸且无反馈

不要使用，除非你有一个非常好的
原因。所有对媒体做出反应的元素都应该有一个视觉效果
触摸时的反馈

TouchableWithoutFeedback仅支持一个子项。如果你想
多个子组件，将它们包装到视图中。重要的是
TouchableWithoutFeedback通过克隆其子对象并应用
响应者支持它。因此，要求任何中间人
组件通过这些道具传递到底层的React Native
组成部分

使用
TouchableOpacity
而不是
TouchableWithoutFeedback
TouchableOpacity
就像一个具有触摸功能的
视图
TouchableWithoutFeedback
克隆每个子项，并且不能正确处理flex样式。@Christolytras Hi！我更改了它，但它都保持不变…尝试按步骤调试问题。然后现在尝试从
react native
而不是
react native手势处理程序导入
touchablepacity
。如果从
选项
样式中取消注释，
backgroundColor:“red”
颜色是否有效？您使用的是哪个版本的
react native
和
react native手势处理程序
？我在使用
react native手势时遇到了一些问题-handler@1.5.0
与
反应-native@0.61.x
。我现在觉得自己很愚蠢。问题似乎来自于导入“reac”表格
export default function SelectorBox(props) {
    return (
        <TouchableWithoutFeedback style={styles.option}>
            <ImageBackground source={props.image} style={styles.background}>
                <View style={styles.titleBar}>
                    <Text style={styles.title}>{props.title}</Text>
                </View>
            </ImageBackground> 
        </TouchableWithoutFeedback>
    )
}

const styles = StyleSheet.create({
    option: {
        flex: 1,
        width: Dimensions.get('window').width,
        // backgroundColor: 'red'
    },
    background: {
        flexDirection: "column",
        alignItems: 'center',
        justifyContent: 'center',
        flex: 1,
        width: Dimensions.get('window').width,
    },
    titleBar : {
        width: Dimensions.get('window').width, 
        height: 60, 
        backgroundColor: '#ffb623',
        justifyContent: 'center'
    },
    title: {
        fontWeight: "900",
        fontSize: 32,
        alignSelf: 'center',
    }

})