Question

我有一个包含组件的标头。这个标题在android和iOS中应该有阴影。它在iOS上运行但在android中没有显示任何内容。

class Toolbar extends Component {

  render() {
    return (
      <View style={[styles.toolBar, this.props.style]}>
        {this.props.children}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  toolBar: {
    zIndex: 1,
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    height: topBarHeight,
    backgroundColor: colors.base,
    elevation: 5,
    shadowOpacity: 0.3,
    shadowRadius: 1,
    shadowOffset: {
      height: 2,
      width: 0
    }
  }
});

Answer 1

正如documentation中所述，影子道具（shadowColor，shadowOffset，shadowOpacity和shadowRadius）仅适用于iOS。

Answer 2

如果未显示视图，则不应在一种样式中使用zIndex和高程。将android的zIndex设置为零。

zIndex: (Platform.OS == 'ios') ? 1 : 0

本机反应：在android中查看不显示

2 个答案: