如何應用樣式來響應原生組件與數組映射

Question

由於錯誤無法使應用程序工作，很遺憾我在網上沒有找到解決方案，所以我在這里問，錯誤是什么？

這是我的 App.js 代碼：

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>
  );
}

和 main.js 的樣式：

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 }

每個用戶塊我都有錯誤：

組件出現上述錯誤：

div div div 用戶 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

考慮向樹中添加錯誤邊界以自​​定義錯誤處理行為。 訪問https://reactjs.org/link/error-boundaries以了解有關錯誤邊界的更多信息。

最后出現一個錯誤：

未捕獲的錯誤： style道具需要從樣式屬性到值的映射，而不是字符串。 例如，使用 JSX 時 style={{marginRight: spacing + 'em'}}。

Answer 1

我想，我找到了解決方案。 要使代碼正常工作，您應該將 '' 替換為 '' ，這樣可以正常工作，但我也將代碼移到了組件文件中：

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;