React Native 当在另一个视图上单击时改变视图的背景颜色

wn9m85ua 于 2023-06-24 发布在 React

关注(0)|答案(1)|浏览(168)

我是react-native的新手，请耐心等待。单击单独的视图元素时，我试图更改视图元素的背景色。我有一个名为wrapper的视图元素和另一个名为body的视图元素。我想要实现的是当我点击视图“body”时改变视图“wrapper”的backgroundColor属性。我如何才能做到这一点？我在下面尝试的抛出错误Attempted to assign to readonly property.什么是正确的方法来做到这一点？先谢谢你了

import { StatusBar } from "expo-status-bar";
import {
  StyleSheet,
  View,
  TouchableHighlight
} from "react-native";

export default function App() {
  {/*Something like this*/}
  const changeBgColor = () => {
    styles.wrapper.backgroundColor = "#000000";
  };
  
  return (
    <View style={styles.wrapper}>
      <TouchableHighlight onPress={changeBgColor}>
        <View style={styles.body}>
          
        </View>
      </TouchableHighlight>
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    width: 130,
    height: 130,
    padding: "4%",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#ff0000",
  },
  body: {
    width: "100%",
    height: "100%",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#ffffff",
  },
});

react-native

来源：https://stackoverflow.com/questions/76526954/change-the-background-color-of-view-when-clicked-on-another-view

1条答案

按热度按时间

ql3eal8s1#

您可以通过更改状态来更改背景色。你必须使用状态作为背景色;当你想改变它时，你可以通过setState改变状态。
在您的示例中，我在viewBGColor状态下设置了默认背景色，并在单击按钮上更改了背景色状态。

import { StatusBar } from "expo-status-bar";
import {useState} from 'react';
import {StyleSheet, View, TouchableHighlight} from 'react-native';

export default function App() {
  const [backgroundColor, setBackgroundColor] = useState(
    styles.wrapper.backgroundColor,
  );

  const changeBgColor = () => {
    setBackgroundColor('#000000');
  };

  return (
    <View style={[styles.wrapper, {backgroundColor: backgroundColor}]}>
      <TouchableHighlight onPress={changeBgColor} style={styles.body}>
        <View />
      </TouchableHighlight>
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    width: 130,
    height: 130,
    padding: '4%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ff0000',
  },
  body: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffffff',
  },
});

赞(0）回复(0）举报 2023-06-24

我来回答

React Native 当在另一个视图上单击时改变视图的背景颜色

1条答案

相关问题

热门标签

最新问答