使用嵌套在 Touchable Opacity 中的图像进行导航

Question

背景：

我在 React Native 中为我的应用程序设计了一个自定义页脚，我设置了一些图像作为图标。我试图让他们在触摸时重定向到应用程序的其他页面。

我的尝试

我一直在尝试使用嵌套在 TouchableOpacity 组件中的相同图像，让它们使用反应导航重定向到其他页面。 这是我的代码：

export class Footer extends React.Component {
    
    render (){
        return (
            <View style = { styles.footStyle } >

                <TouchableOpacity onPress={ () => navigation.push('Home')} >
                    <Image 
                        style = { styles.iconStyle }
                        source = {require('./img/home.png')}/>
               </TouchableOpacity>
               
               <TouchableOpacity onPress={ () => navigation.push('Favoritos')} >
                    <Image 
                        style = { styles.iconStyle }
                        source = {require('./img/heart.png')}/>
                </TouchableOpacity>

                <TouchableOpacity onPress={ () => navigation.push('Search')} >
                    <Image 
                        style = { styles.iconStyle }
                        source = {require('./img/search.png')}/>
                </TouchableOpacity>

                <TouchableOpacity onPress={ () => navigation.push('Notifications')} >
                    <Image 
                        style = { styles.iconStyle }
                        source = {require('./img/bell.png')}/>
                </TouchableOpacity>
                
                <TouchableOpacity onPress={ () => navigation.push('Help')} >
                    <Image 
                        style = { styles.iconStyle }
                        source = {require('./img/circle.png')}/>
                </TouchableOpacity>

            </View>
        )
    }
} 

const styles = StyleSheet.create({
    footStyle: {
        paddingBottom: 0,
        paddingRight: 10,
        backgroundColor: '#ffffff',
        flex: 0.4,
        flexDirection: 'row',
        borderTopWidth: 1,
        borderTopColor: '#000000'
    },
    iconStyle: {
        flex: 0.2,
        height: undefined,
        width: undefined
    }
})

问题

当我尝试在 expo 中运行应用程序时，图像根本没有呈现。我得到没有任何内容的空白页脚。我尝试触摸页脚以查看图像是否未呈现，但“按钮”确实有效，但无效。

问题

如何在 TouchableOpacity 组件中嵌入图像？甚至可以在 React Navigation 中使用这种方法吗？

非常感谢！

Answer 1

要使 Image 组件正常工作，您应该在样式中提供高度和宽度。

在这里您将其设置为未定义 尝试类似

 iconStyle: {
        flex: 0.2,
        height: 100,
        width: 100
    }

同样在导航上，您必须将导航道具传递给页脚。作为一个类，您应该以 this.props.navigation.navigate()

的身份访问它

由于您的集成页脚的代码不在此处，因此很难评论如何将道具传递给页脚。