[英]How to show first letters of the firstname and lastname of the user in the list instead of image through json data using reactjs
I'm new to reactjs, doing a small react app which should hold first letter of User's firstname and lastname using json data in reactjs.我是reactjs的新手,正在做一个小型react应用程序,它应该使用reactjs中的json数据保存用户名字和姓氏的第一个字母。 but i'm unable to do it... I getting functions for static data but not for dynamic.
但我做不到……我得到的是静态数据的函数,但不是动态的。
json data: json数据:
[ { "id": 1, "firstname": "Avelino", "lastname": "Cajes", "position": ".Net Developer", }, [ { "id": 1, "firstname": "Avelino", "lastname": "Cajes", "position": ".Net Developer", },
{ "id": 2, "firstname": "Nilson", "lastname": "Audrey", "position": "C#", } { "id": 2, "firstname": "Nilson", "lastname": "Audrey", "position": "C#", }
] ]
Can anyone help me to do this problem?谁能帮我解决这个问题? Thanks in advance.
提前致谢。
I want in this way我要这样
Install react-avatar
:安装
react-avatar
:
npm install react-avatar
Then try adapting this code to suit your use case然后尝试修改此代码以适合您的用例
import React from "react";
import Avatar from 'react-avatar';
let data = [
{ "id": 1, "firstname": "Avelino", "lastname": "Cajes", "position": ".Net Developer"},
{ "id": 2, "firstname": "Nilson", "lastname": "Audrey", "position": "C#", }
]
class MyComponent extends React.Component{
state = {data}
render(){
return(
<div>
{ this.state.data.map(item=>(
<Avatar name={item.firstname+" "+item.lastname} maxInitials={2}/>
))
}
</div>
)
}
}
You can find out more on how to use react-avatar
here您可以在此处找到有关如何使用
react-avatar
信息
I think this is what u asked for
我想这就是你要求的
pass this to text element: firstName.charAt(0).toUpperCase() +""+lastName.charAt(0).toUpperCase()将此传递给文本元素: firstName.charAt(0).toUpperCase() +""+lastName.charAt(0).toUpperCase()
import { LinearGradient } from 'expo-linear-gradient';
<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style=
{styles.linearGradient}>
<Text style={styles.buttonText}>
</Text>
</LinearGradient>
// Later on in your styles..
var styles = StyleSheet.create({
linearGradient: {
flex: 1,
paddingLeft: 15,
paddingRight: 15,
borderRadius: 5
},
buttonText: {
fontSize: 18,
fontFamily: 'Gill Sans',
textAlign: 'center',
margin: 10,
color: '#ffffff',
backgroundColor: 'transparent',
},
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.