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

Question

由于错误，我无法获得应用程序的工作，不幸的是我没有在互联网上找到解决方案，所以我问这里，什么是错误?

这是我的App.js代码:

const users = [
{
name: 'Benedict Cumberbatch',
phone: '[phone]',
total: 91
},
{
name: 'John Wick',
phone: '[phone]',
total: -98
},
{
name: 'Ryan Thomas Gosling',
phone: '[phone]',
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中的style:

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 }

我得到了每个用户块的错误:

上述错误发生在组件中:

divdiv用户div。/node_modules/react-native-web/dist/出口/视图/index.js/View<@http://localhost: 19006/静态/js/bundle.js: 35666:19div。/node_modules/react-native-web/dist/出口/视图/index.js/View<@http://localhost: 19006/静态/js/bundle.js: 35666:19。/node_modules react-native-web/dist/出口/滚动视图/ScrollViewBase.js/ScrollViewBase<@http://localhost: 19006/静态/js/bundle.js: 32894:18ScrollView ScrollViewdiv。/node_modules/react-native-web/dist/出口/视图/index.js/View<@http://localhost: 19006/静态/js/bundle.js: 35666:19应用程序ExpoRootComponent@http://localhost: 19006/静态/js/bundle.js: 4196:83div。/node_modules/react-native-web/dist/出口/视图/index.js/View<@http://localhost: 19006/静态/js/bundle.js: 35666:19div。/node_modules/react-native-web/dist/出口/视图/index.js/View<@http://localhost: 19006/静态/js/bundle.js: 35666:19AppContainer@http://localhost: 19006/静态/js/bundle.js: 32304:18

考虑在树中添加错误边界以自定义错误处理的行为。请访问https://reactjs.org/link/error-boundaries

结尾有一个错误:

Uncaught Error:styleprop期望从样式映射属性转换为值，而不是字符串。例如，style={{marginRight:当使用JSX.

时，spacing + 'em'}}

Answer 1

我想我找到解决办法了。为了使代码工作，你应该替换"by"，这将工作得很好，但我也将代码移动到组件文件:

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;