Question

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

基本上，我为2个类别的用户创建了一个登录名：“常规”和“加号”。登录后，它们将重定向到HomeUser页面。

我的问题是，在此“ 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）

我的想法是，如果必须对角色进行更多检查，则应用程序的效率会降低。

Answer 1

成功登录后，首先编辑配置文件，可以将用户修复信息保存在local storage上，然后可以打开新的页面名称UserEditProfile，这是提高效率的好方法。

如果要显示1页2个不同角色的组件，则必须创建2个这样的组件

//it's different .jsx file
<RegularUserComponent /*you can add props here*/ /> 
<SpecificRoleUserComponent />

然后您可以像这样致电

import RegularUserComponent  from './components/RegularUserComponent.js'
import SpecificRoleUserComponent from './components/RegularUserComponent.js';

并像这样使用

// in render 
 {Roles==="Reqular" ? <RegularUserComponent/> :<SpecificRoleUserComponent/> }

有关信息的本地存储，您必须检查此link

和组件示例

    import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,Button,Image} from 'react-native';
export default class NameOfYouComponent extends Component {
constructor(props) {
  super(props);
  this.state = {
  }
}

  render() {
    const {RequestResponse} = this.state;
    return (
      <View style={styles.container}>
      {/*Here is Component include*/}
       </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

您可以这样打

import NameOfYouComponent from './../afolder/Component/NameOfYouComponent'

Answer 2

如果我正确理解了您的问题，那么您想在用户角色为特定角色时呈现一个组件。在这种情况下，您可以使用条件渲染：

{condition && <Component>}

在内部渲染返回函数。

在您的代码中，诸如：

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

应该可以解决问题

React Native：具有动态内容的单一视图

2 个答案: