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

【问题标题】：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 属性中使用模板来渲染视图。请看看这个？此外，当单击相应的框时，应仅对相应的框进行突出显示。

【问题讨论】：

标签： react-native view react-native-android

【解决方案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>

【讨论】：