Question

我想知道是否有一种简单的方法可以根据条件将动态组件呈现到视图中，例如“ userpermission ='admin'，它随后显示了用户在不使用此变量的情况下拥有的更多按钮。：

logical_and()

Answer 1

尝试这种方式

const HomeScreen = ({ navigation }) => {
  const userpermission = 'admin';
  const adminbutton = '<Button title="Adminstuff"></Button>';

  const renderButtonsContainer = () => {
      return <View>
          <Button title="Adminstuff"></Button>
          <Button title="Adminstuff"></Button>
          .........
    </View>

  }

  return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          {userpermission == 'admin' ? renderButtonsContainer() : null }

        </View>
      );
};

Answer 2

在功能组件中实现此目标的更好方法。

import { Button } from 'react-native';

const MyButton = ({userpermission}) => {
  if(userpermission == 'admin'){
    return <Button title="Adminstuff"/>
  }
  else {
    return <Button title="Userstuff"/>
  }
}

const HomeScreen = () => {
  const userpermission = 'admin';

  return (
    <View>
        <View>Something</<View>
        <MyButton userpermission={userpermission} />
    </View>
  )
}

Answer 3

您可以执行以下操作。

import React, { useState } from 'react';
import {Button, Text, View, StyleSheet, TouchableOpacity} from 'react-native';

const HomeScreen = ({ navigation }) => {
  const userpermission = 'admin';

  return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text>Applikationen</Text>
            <TouchableOpacity 
                style={styles.button}
                onPress={() =>  navigation.navigate('Arbeitszeiterfassung')}>
                <Text style={styles.text}>Arbeitszeiterfassung</Text>
            </TouchableOpacity>
            {userpermission == "admin" ? <Button title="Adminstuff" /> : null}

        </View>
      );
};

React Native，如果条件为真，则渲染按钮

3 个答案: