使用嵌套在 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

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

此处您将其设置为未定义试试像

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

同样在导航上，您必须将导航道具传递给页脚。由于它是 class，您应该以 this.props.navigation.navigate()

访问它

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

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

Navigation using images nested inside Touchable Opacity

nested

react-native

touchableopacity

react-navigation