[英]How to apply styles to react native component with array map
由于错误无法使应用程序工作,很遗憾我在网上没有找到解决方案,所以我在这里问,错误是什么?
这是我的 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'}}。
我想,我找到了解决方案。 要使代码正常工作,您应该将 '' 替换为 '' ,这样可以正常工作,但我也将代码移到了组件文件中:
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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.