React Native array map渲染组件时样式应用报错排查

未捕获错误：style 属性要求传入样式属性与值一一对应的对象，不支持传入字符串。使用JSX时正确写法参考：style={{marginRight: spacing + 'em'}}

• React Native（包括你当前使用的react-native-web运行环境）不支持直接使用HTML原生的div、span标签，所有布局标签要使用RN内置的View，所有文本内容必须包裹在Text组件内，直接写HTML标签会导致样式解析异常。
• 你在StyleSheet.create中写了不符合RN规范的样式值：RN样式默认单位是独立像素，不需要写px后缀，也不支持CSS简写属性（比如padding: "10px 15px"这种多值简写），传入字符串类型的样式值会直接触发类型校验报错。
• StyleSheet.create仅支持传入纯静态样式对象，不能在内部定义函数。你把动态样式函数userValue写在StyleSheet内部后，函数会被RN的样式注册逻辑处理成无效值，调用后无法返回合法的样式对象。
• 列表渲染时取值逻辑错误：Users组件没有接收props参数，你写的props.props.total是不存在的undefined值，应该直接取当前遍历项user的total属性做判断。
• 基础组件未导入：代码中使用了View、ScrollView但没有从react-native包中导入，也会导致渲染异常。

1. 替换所有原生HTML标签：div替换为View，所有文本外层的span、纯文本节点包裹在Text组件内，从react-native导入需要用到的内置组件。
2. 修正样式写法：删除所有样式值的px后缀，把CSS简写属性拆成单独属性写（比如padding拆为paddingHorizontal、paddingVertical等），尺寸、间距类值直接写数字即可。
3. 把动态样式函数从StyleSheet.create中移出，定义为普通的外部函数，避免被样式注册逻辑破坏。
4. 修正列表渲染的取值逻辑，判断当前遍历项user.total的正负，传入动态样式函数生成对应样式。

修正后的样式文件（main.js） #

import { StyleSheet} from 'react-native';

// 动态样式定义为普通函数，不要放在StyleSheet.create内
const getUserValueStyle = (positive) => ({
    color: positive ? 'green' : 'red',
    fontSize: 16,
    fontWeight: '500'
});

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 50,
        backgroundColor: '#fff'
    },
    userCard: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 15,
        paddingVertical: 12,
        borderBottomWidth: 1,
        borderBottomColor: '#f0f0f0'
    },
    userIcon: {
        width: 50,
        height: 50,
        borderRadius: 25,
        backgroundColor: '#f5f5f5',
        alignItems: 'center',
        justifyContent: 'center',
        marginRight: 15
    },
    userIconLetter: {
        color: '#333',
        fontSize: 20
    },
    userData: {
        flex: 1
    },
    userName: {
        color: '#000',
        fontSize: 16,
        fontWeight: '500'
    },
    userPhone: {
        color: '#666',
        fontSize: 14,
        marginTop: 4
    }
})

export { styles, getUserValueStyle }

修正后的入口文件（App.js） #

import { View, ScrollView, Text } from 'react-native';
import { styles, getUserValueStyle } from './main'; // 替换为你实际的样式文件路径

const users = [
    {
        name: 'Benedict Cumberbatch',
        phone: '+1 17 327 13 89',
        total: 91
    },
    {
        name: 'John Wick',
        phone: '+4 77 623 76 89',
        total: -98
    },
    {
        name: 'Ryan Thomas Gosling',
        phone: '+1 37 717 24 11',
        total: 3902
    }
];

const Users = () => {
    return users.map((user, index) => {
        // 按顺序生成A/B/C头像首字母，替换原来写死的'A'
        const userIconLetter = String.fromCharCode(65 + index);
        return (
            <View style={styles.userCard} key={index}>
                <View style={styles.userIcon}>
                    <Text style={styles.userIconLetter}>
                        {userIconLetter}
                    </Text>
                </View>
                <View style={styles.userData}>
                    <Text style={styles.userName}>
                        {user.name}
                    </Text>
                    <Text style={styles.userPhone}>
                        {user.phone}
                    </Text>
                </View>
                <Text style={getUserValueStyle(user.total > 0)}>
                    {user.total}
                </Text>
            </View>
        )
    })
}

export default function App() {
  return (
    <View style={styles.container}>
        <ScrollView>
            <Users />
        </ScrollView>
    </View>
  );
}

内容的提问来源于stack exchange，提问作者AccessDenied