时间戳

首页 > 解决方案 > 为什么这种样式属性分配在 React Native 中不能按预期工作？

javascript - 为什么这种样式属性分配在 React Native 中不能按预期工作？

问题描述

我已经在我的浏览器中（使用 Expo CLI Webpack）在 React Native 上测试了以下代码，结果是屏幕左侧的三个绿色方块。

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

const styles = {
  width: 100,
  height: 100,
  backgroundColor: "green"
};

const Rectangle = (label, value) => {
  return (
  <View style={[styles, {[label]: value}]}/> // Line I expect to modify style.backgroundColor
  );
};

const Page = () => {
  return (
    <View style={{flex: 1, justifyContent: "space-evenly"}}>
    <Rectangle label="backgroundColor" value="red" />
    <Rectangle label="backgroundColor" value="green" />
    <Rectangle label="backgroundColor" value="blue" />
    </View>
  );
};

export default Page;

但是，我预计会看到一个红色、绿色和蓝色的正方形。我试图模仿在 RN 文档的这个页面上多次使用的模式，但它的行为不像我预期的那样。有人可以解释一下我在这里误解了什么吗？谢谢。

标签： javascriptreact-native

解决方案

道具将作为单个对象属性传递，而不是作为多个属性传递。

只需替换(label, value)为({label, value}).

通过在你的道具周围放置花括号，你正在破坏第一个属性，在这种情况下是你的道具。

推荐阅读