如何应用样式来响应原生组件与数组映射

Question

I can't get the application to work due to errors, unfortunately I did not find a solution on the Internet, so I ask here, what is the error?

This is my App.js code:

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 = () => {
    let userIconLetter = 'A';

    return users.map((user, index) => {
        return (
            <div style={styles.userCard} key={index}>
                <div style={styles.userIcon}>
                    <span style={styles.userIconLetter}>
                        {userIconLetter}
                    </span>
                </div>
                <div style={styles.userData}>
                    <div style={styles.userName}>
                        {user.name}
                    </div>
                    <div style={styles.userPhone}>
                        {user.phone}
                    </div>
                </div>
                <div style={styles.userValue(props.props.total > 0)}>
                    {user.total}
                </div>
            </div>
        )
    })
}

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

and main.js in styles:

import { StyleSheet} from 'react-native';
const styles = StyleSheet.create({
    container: {
        flex: 1,
        fontFamily: "'Roboto', sans-serif",
    },
    navigationButton: {
        padding: "10px 15px",
    },
    userIcon: {
        width: "50px",
        height: "50px"
    },
    userCard: {
        color: 'black'
    },
    userIconLetter: {
        color: 'black'
    },
    userData: {
        color: 'black'
    },
    userName: {
        color: 'black'
    },
    userPhone: {
        color: 'black'
    },
    userValue: (positive) => {
        let color = positive ? 'green' : 'red';
    
        return {
            color: color,
        };
    },
})

export { styles }

I've got errors for every user block:

The above error occurred in the component:

div div div Users div ./node_modules/react-native-web/dist/exports/View/index.js/View<@http://localhost:19006/static/js/bundle.js:35666:19 div ./node_modules/react-native-web/dist/exports/View/index.js/View<@http://localhost:19006/static/js/bundle.js:35666:19 ./node_modules/react-native-web/dist/exports/ScrollView/ScrollViewBase.js/ScrollViewBase<@http://localhost:19006/static/js/bundle.js:32894:18 ScrollView ScrollView div ./node_modules/react-native-web/dist/exports/View/index.js/View<@http://localhost:19006/static/js/bundle.js:35666:19 App ExpoRootComponent@http://localhost:19006/static/js/bundle.js:4196:83 div ./node_modules/react-native-web/dist/exports/View/index.js/View<@http://localhost:19006/static/js/bundle.js:35666:19 div ./node_modules/react-native-web/dist/exports/View/index.js/View<@http://localhost:19006/static/js/bundle.js:35666:19 AppContainer@http://localhost:19006/static/js/bundle.js:32304:18

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

And one error at the end:

Uncaught Error: The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

Answer 1

I found solution, i think. To make code work you should replace '' by '' and this will work fine, but I also moved code to component file:

import React, { Component } from 'react';
import styles from '../assets/css/user';
import {Text, View} from "react-native-web";

class User extends Component {
    render() {
        let userIconLetter = Array.from(this.props.name)[0];

        return (
            <View style={styles.card}>
                <View style={styles.icon}>
                    <Text style={styles.iconLetter}>
                        {userIconLetter}
                    </Text>
                </View>
                <View style={styles.data}>
                    <View style={styles.Name}>
                        <Text>{this.props.name}</Text>
                    </View>
                    <View style={styles.phone}>
                        <Text>{this.props.phone}</Text>
                    </View>
                </View>
                <View style={styles.value}>
                    <Text>{this.props.total}</Text>
                </View>
            </View>
        );
    };
}

export default User;