如何在 React Native 中突出显示视图？

Question

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

Answer 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>
    );
  }
}

Answer 2

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

Answer 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>

如何在 React Native 中突出显示视图？

How to give highlight a View in react native?

view

react-native

react-native-android