如何在本机反应中突出显示视图？

Posted 2023-02-22

【中文标题】如何在本机反应中突出显示视图？

【英文标题】：How to give highlight a View in react native?

【发布时间】：2021-08-31 07:25:27

【问题描述】：

我是 RN 新手，目前正在开发一个项目。我需要为像 [the 1st image]、[this is the design i have right now]、[code for the template] 这样的视图创建突出显示。然后在 renderitem 属性中使用模板来渲染视图。请看看这个？此外，当单击相应的框时，应仅对相应的框进行突出显示。

【参考方案1】：

您可以使用条件（三元）运算符来更改边框颜色。

https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Operators/Conditional_Operator

class SlotTemplate extends React.Component 
  render() 
    return (
      <View>
        <View style= borderColor: this.props.checked ? '#F00' : '#444' >
          <CheckBox />
        </View>
      </View>
    );
  

【讨论】：

我会检查一下，还有如何在单击框时突出显示它？

您也可以这样做。 :) 只需创建一个新状态而不是道具，并使用条件（三元）运算符根据该状态更改边框颜色。单击时，会将状态 false 更新为 true，反之亦然。

它确实有效。但我想我在将状态从 true 更新为 false 时遇到问题。目前，当我单击框时，每个框都会突出显示并保持状态。

好！更新状态已经是一个不同的话题，但在这里你可以看看我的示例代码，将状态 true 更新为 false 并将 false 更新为 true ......一次又一次。

``` this.setState((prevState) => !prevState.checked); ```

【参考方案2】：

您可以使用shadowColor shadowOffset 属性为您的视图添加阴影。这个链接可以帮助你 https://ethercreative.github.io/react-native-shadow-generator/

【参考方案3】：

试试这个例子：

将此样式用于第二个视图。

<View style=borderWidth:2, margin:10, padding:10, borderColor:'#444',
                        backgroundColor:'#fff',
                        shadowColor: "#000",
                        shadowOffset: 
                          width: 0,
                          height: 3,
                        ,
                        shadowOpacity: 0.29,
                        shadowRadius: 4.65,
                        elevation: 7,
          >
<Text>Sample Text</Text>