React Native报错ReferenceError: Can't find variable: style 求助排查

以下是你的代码存在的问题及对应的修复方案：

1. 样式对象引用错误 #

错误提示的ReferenceError: Can't find variable: style是因为在PostFooter组件中，你使用了style.footerIcon，但实际定义的样式对象是styles（注意末尾的s）。

修复：将style.footerIcon改为styles.footerIcon。

2. PostFooter组件缺少返回语句 #

你的PostFooter是函数组件，但没有通过return返回JSX内容，React无法识别要渲染的元素。

修复：可以改为隐式返回（去掉大括号），或者显式添加return：

// 隐式返回写法
const PostFooter = () => (
  <Icon imgStyle={styles.footerIcon} imgUrl={postFooterIcons[0].ImageUrl} /> 
)

// 或者显式return
const PostFooter = () => {
  return <Icon imgStyle={styles.footerIcon} imgUrl={postFooterIcons[0].ImageUrl} /> 
}

3. 样式属性的驼峰命名错误 #

React Native的样式属性遵循驼峰命名规范，你代码中的marginleft和borderwidth需要改为marginLeft和borderWidth，否则样式不会生效。

修复：修改styles中的对应属性：

const styles = StyleSheet.create({
   story:{
       width: 35,
       height: 35,
       borderRadius : 50,
       marginLeft:6, // 修正为驼峰
       borderWidth:1.6, // 修正为驼峰
       borderColor: '#ff8501',
   },

   footerIcon : {
       width: 33,
       height: 33,
   }
})

4. PostImage组件硬编码图片地址 #

当前PostImage组件中固定了图片URL，没有使用传入的post对象中的图片地址，不符合组件复用性要求。

修复：替换为post中的图片字段（假设post包含image字段）：

const PostImage = ({post}) => (
   <View
       style={{
           width: '100%',
           height: 450,
       }}> 
   <Image 
   source={{ uri: post.image }} // 使用post的图片地址
   style={{height:'100%', resizeMode:'cover'}} />  
   </View>  
)

5. PostFooter未渲染所有图标 #

当前PostFooter只渲染了第一个图标，应该遍历postFooterIcons数组来渲染全部四个图标。

修复：使用map遍历数组：

const PostFooter = () => (
  <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
    {postFooterIcons.map((icon, index) => (
      <Icon key={index} imgStyle={styles.footerIcon} imgUrl={icon.ImageUrl} />
    ))}
  </View>
)

修复后的完整代码 #

import React from "react"
import {View, Text, Image, StyleSheet, TouchableOpacity} from 'react-native'
import { Divider } from 'react-native-elements'

const postFooterIcons = [
   {
       name:'Like',
       ImageUrl:'https://thumbs.dreamstime.com/b/facebook-like-vector-icon-white-background-128850059.jpg',
    },
   {
       name:'Comment',
       ImageUrl:'https://uxwing.com/wp-content/themes/uxwing/download/37-communication-chat-call/comment.png',
   },
   {
       name:'Share',
       ImageUrl:'https://cdn.icon-icons.com/icons2/2036/PNG/512/sharing_share_icon_124236.png',
   },
   {
       name:'Save',
       ImageUrl:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvRw8IyLCFaN6nK4G1nWzEy0P4MKHIEbLO5Re7LgXYcOHC0JlKfp3kLq7eyorVOqknEtA&usqp=CAU',
   },
]

const Post = ({post}) => {
   return(
       <View style={{ marginBottom:30}}>
           <Divider width={1} orientation='vertical' />
           <PostHeader post={post}/>
           <PostImage post={post}/> 
           <View style={{marginHorizontal:15, marginTop: 10}}> 
               <PostFooter />
           </View>
        </View>
   )
}

const PostHeader = ({post}) => (
   <View 
       style={{
           flexDirection: 'row', 
           justifyContent:'space-between', 
           margin:5, 
           alignItems:'center'}}>
       
       <View style={{ flexDirection : 'row', alignItems:'center'}}>
          <Image source={{ uri: post.profile_picture }} style={styles.story} />
          <Text style={{ color: 'white', marginLeft: 5, fontWeight:'700'}}>
           {post.user}   
           </Text>
       </View>

       <Text style={{color:'white', fontWeight:'900'}}>...</Text>
    </View>     
)

const PostImage = ({post}) => (
   <View
       style={{
           width: '100%',
           height: 450,
       }}> 
   <Image 
   source={{ uri: post.image }} 
   style={{height:'100%', resizeMode:'cover'}} />  
   </View>  
)

const PostFooter = () => (
  <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
    {postFooterIcons.map((icon, index) => (
      <Icon key={index} imgStyle={styles.footerIcon} imgUrl={icon.ImageUrl} />
    ))}
  </View>
)

const Icon = ({imgStyle, imgUrl}) => (
   <TouchableOpacity>
       <Image style={imgStyle} source={{ uri: imgUrl}} /> 
   </TouchableOpacity>
)

const styles = StyleSheet.create({
   story:{
       width: 35,
       height: 35,
       borderRadius : 50,
       marginLeft:6,
       borderWidth:1.6,
       borderColor: '#ff8501',
   },

   footerIcon : {
       width: 33,
       height: 33,
   }
})

export default Post

内容的提问来源于stack exchange，提问作者박요셉