Question

我在我的应用中显示简单的图像背景，但不知道为什么不显示

我的代码

    return (
        <View style={styles.container} >

            <StatusBar translucent={true} backgroundColor="transparent" />

            <View>

                    <ImageBackground
                        style={{ height: '100%', width: '100%', resizeMode: 'cover', opacity: 1, }}
                        source={require('../../../public/images/hhh.png')}
                    >
                        <View style={{
                            justifyContent: 'center', alignItems: 'center', marginTop: 'auto',
                        }}>
                            <Image
                                source={require('../../../public/icons/success.png')}
                            // style={styles.iconStyle}
                            />
                            <Text style={styles.orderPlaceText}>
                                Order Placed
                            </Text>

                            <Text style={{
                                fontSize: 16,
                                fontWeight: "bold",
                                color: "white"
                            }}>
                                Order# {route.params.orderNumber}
                            </Text>

                            <Text style={styles.heading}>
                                {route.params.brandName}, {route.params.branchLocation.Address}
                            </Text>
                            <Text style={styles.description}>
                            {route.params.description}
                            </Text>
                            <Text style={styles.thanks}>
                                Thank you !
                            </Text>
                        </View>
                        <View style={{
                            justifyContent: 'center', alignItems: 'center',
                            marginTop: 'auto', marginBottom: 40
                        }}>
                            <TouchableOpacity
                                style={{
                                    backgroundColor: '#ff8955',
                                    borderRadius: 8,
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    width: 300,
                                    height: 50,
                                }}
                                onPress={() => {
                                    navigation.dispatch(
                                        StackActions.popToTop()
                                    );
                                    navigation.navigate('Orders');
                                }}
                            >
                                <Text style={{ color: 'white', fontSize: 14, fontWeight: 'bold', lineHeight: 23.5 }}>
                                    TRACK MY ORDER
                                </Text>
                            </TouchableOpacity>
                            <TouchableOpacity
                                onPress={() => navigation.navigate('Home')}
                                style={{
                                    width: 300,
                                    height: 50,
                                    borderWidth: 1.5,
                                    borderColor: 'white',
                                    borderRadius: 8,
                                    marginTop: 16,
                                    alignItems: 'center',
                                    justifyContent: 'center'
                                }}
                            >
                                <Text style={{ fontSize: 15, color: 'white' }}>Back to Home</Text>
                            </TouchableOpacity>
                        </View>
                </ImageBackground>
            </View>
        </View>
    )

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor:'grey'
    },
    orderPlaceText: {
        fontSize: 28,
        color: 'white',
        fontWeight: 'bold',
        marginTop: 16
    },
    heading: {
        fontSize: 16,
        color: 'white',
        fontWeight: 'bold',
        marginTop: 16
    },
    description: {
        fontSize: 16,
        color: 'white',
        marginTop: 16,
        textAlign: 'center'
    },
    thanks: {
        fontSize: 26,
        lineHeight: 31,
        color: 'rgb(255, 255, 255)',
        fontWeight: 'bold',
        marginTop: 16
    },
    buttonText: {
        color: 'white',
        fontSize: 18,
        fontWeight: 'bold',
        lineHeight: 23
    }
})

如果我将图像更改为另一个图像，我将面临一个意想不到的问题，它的工作正常意味着只有一个图像，如果没有显示任何其他图像-_- 我尝试重命名我的图像，然后尝试使用它，但该图像未显示是否有与图像大小或其他相关的任何问题？因为不可能只有少数图像有效而其他图像无效。

Answer 1

包装 ImageBackground 的 View 没有 width/height/flex 值。因此，该视图中的内容将不会出现，因为其维度为 0（有关说明，请参阅来自 react-native 文档的 this excerpt）

要解决这个问题，只需在视图的样式中添加一个 { flex: 1 }。

Answer 2

在您的图片代码中

 <Image source={require('../../../public/icons/success.png')}
                            // style={styles.iconStyle}
                            />

您没有添加宽度/高度，这一定是您的图片未显示的原因

请这样做

 <Image style={{width:20, height:20}}
                                source={require('../../../public/icons/success.png')}                            />

反应本机背景图像未显示

2 个答案: