javascript - react native : Single View with Dynamic Content

Question

我正在学习使用 React-Native(以及 Javascript)编程，我有一个问题。

基本上，我为两类用户创建了登录名:“普通”和“高级”。 登录后，他们将重定向到 HomeUser 页面。

我的问题是，在这个“HomeUser”页面中，我应该根据用户类型创建动态内容。

这是家庭用户

class HomeUser extends Component {
   constructor(props){
       super(props);
    }

    render() {
        const FirstName = global.utente.data.Person.FirstName;
        const LastName = global.utente.data.Person.LastName;
        const Username = global.utente.data.Person.FiscalCode;
        const Roles = global.utente.data.Roles
        console.log(Roles) 
        return (

            <View style={style.container}>
            <View style={style.page}>
                <Icon name="user-circle" color="#64c7c0" size={70} onPress={() => Actions.viewprofile()} />
                <Text style={{paddingBottom: 15, textAlign: 'center', fontSize: 15, color: '#64c7c0', fontWeight: 'bold'}}>View Profile</Text>

                 <Text style={{textAlign: 'center', fontSize: 20,}}>{"Welcome"}</Text>
                 <Text style={{textAlign: 'center', fontSize: 20, color: '#64c7c0', fontWeight: 'bold'}}>{FirstName} {LastName}</Text>
                 <Text>{Roles}</Text>

 //Add here "EDIT PROFILE" button to link a the page to edit profile, only for Regular User.

            </View>
            </View>
        )
    }
}
export default HomeUser;

所以我应该为用户动态插入内容。你能解释一下我该怎么做，例如编辑配置文件吗？我应该创建一个新页面并使用 If 条件链接到该页面吗？ (我不这么认为 xD)

我的想法是，如果我必须对 Angular 色做更多的检查，应用程序的效率就会变慢。有没有可能出现这个问题？

Answer 1

如果我正确理解您的问题，您希望在用户 Angular 色是特定 Angular 色时呈现组件。 在这种情况下，您可以使用条件渲染:

{condition && <Component>}

在你的内部渲染返回函数。

在你的代码中是这样的:

{Roles==="SpecificRole"&&<Button></Button>}

应该可以解决问题