Reactjs React Native（android），组件与影子问题重叠

我正在使用带有图像和文本的自定义组件。图像是相对于文本的。请看截图。
.

我使用了TouchableOpacity组件作为根视图

在长按组件时的屏幕截图中，两个视图与阴影重叠。长时间按压看起来很难看

有关可重用组件，请参见下面的代码

'use strict';

import React, {Component} from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Image,
} from 'react-native';

export default class ExampleButton extends Component {

  constructor (props) {
    super (props);
  }
  _handleOnPress = () => {
    console.log('pressed!!!');
  };

  render () {
    console.log (this.props);
    return (
      <TouchableOpacity
        onPress={this.handleOnPress}
      >
        <View style={styles.btnCompContainer}>
          <View
            style={{
              backgroundColor: '#FFF',
              justifyContent: 'center',
              borderRadius: 30,
              height: 50,
              width: '100%',
            }}
          >
            <Text style={styles.btnTxt}>{this.props.buttonText}</Text>
          </View>

          <View style={[styles.btnElmContainer]}>
            <Image
              style={[{height: 30, width: 30,resizeMode:'stretch'}]}
              source={this.props.image}
            />
          </View>
        </View>

      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create ({
  btnCompContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    height: 60,
    marginLeft: 10,
    marginRight: 20,
  },
  btnElmContainer: {
    position: 'absolute',
    justifyContent: 'center',
    alignItems: 'center',
    width: 60,
    height: 60,
    backgroundColor:'#fff',
    borderRadius: 30,
    shadowColor: '#000000',
    shadowOffset: {
      width: 1,
      height: 1,
    },
    elevation:5,
    shadowRadius: 2,
    shadowOpacity: 0.3,
  },
  btnTxt: {
    marginLeft: 80,
    color: '#9e9e9e',
    fontSize: 16,
    fontWeight: 'bold',
    textAlign: 'left',
  },
});

“严格使用”；
从“React”导入React，{Component}；
进口{
样式表，
文本，
看法
可触摸不透明度，
形象,，
}从“反应本机”；
导出默认类ExampleButton扩展组件{
建造师（道具）{
超级（道具）；
}
_handleOnPress=（）=>{
console.log（'pressed！！！'）；
};
渲染（）{
console.log（this.props）；
返回(
{this.props.buttonText}
);
}
}
const styles=StyleSheet.create({
btnCompContainer:{
flexDirection:'行'，
对齐项目：“居中”，
身高：60，
边缘左：10，
marginRight:20，
},
btnElmContainer：{
位置：'绝对'，
为内容辩护：“中心”，
对齐项目：“居中”，
宽度：60，
身高：60，
背景颜色：“#fff”，
边界半径：30，
阴影颜色：'#000000'，
阴影偏移：{
宽度：1，
身高:1,，
},
标高：5，
阴影半径：2，
阴影不透明度：0.3，
},
btnTxt:{
marginLeft:80，
颜色：“#9e9e9e”，
尺寸：16，
fontWeight:'粗体'，
textAlign:'左'，
},
});

在这里，我在代码中使用这个可重用组件

    'use strict';

import React, {Component} from 'react';
import {
  Animated,
  StyleSheet, 
  Text,
  TextInput,
  View, 
  Image,
  ImageBackground,
  TouchableOpacity,
  Button,
  StatusBar,
  Easing
} from 'react-native';

//  Custom Components

const searchBGImg = require('../assets/search-bg-kit.png');
const houseLogo = require('../Resources/house.png');

import ExampleButton from './components/common/example-button';


export default class TypeSelect extends Component<Props> {
  //  Navigation Option
  static navigationOptions = {
    header: null
  }
  constructor() {
    super();  
    this.state = {
      visible: false,
      x: new Animated.Value(-100),
    };
  }
  slide = () => {
    Animated.spring(this.state.x, {
      toValue: 0,
      easing: Easing.easeOutBack
    }).start();
    this.setState({
      visible: true,
    });
  };
  gotoSearch = () =>{
    this.props.navigation.navigate('DocSearch')
  }
  componentDidMount(){
    this.slide();
  }
  render() {

    return (
      <View style={styles.container}>
        <ImageBackground source={searchBGImg} style={styles.imgBG}>
          <View style={{alignItems:'center', marginBottom:20}}> 
            <Image style={{height:57, width:69, marginBottom:12}} source={houseLogo} />
          </View>
          <View>
            <Animated.View
              style={[styles.slideView, {
                transform: [
                  {
                    translateX: this.state.x
                  }
                ]
              }]}>

              <ExampleButton image={houseLogo} buttonText={'Click here'} />
              <ExampleButton image={houseLogo} buttonText={'Click here'} />

            </Animated.View>  
          </View>
        </ImageBackground>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  imgBG:{
    flex: 1,
    flexDirection: "column",
    justifyContent:"center",
    width: "100%", 
    height: "100%"
  }
})

“严格使用”；
从“React”导入React，{Component}；
进口{
有生气的
样式表，
文本，
文本输入，
看法
形象,，
图像背景，
可触摸不透明度，
按钮
状态栏，
缓和
}从“反应本机”；
//自定义组件
const searchBGImg=require（'../assets/search bg kit.png'）；
const houseLogo=require（'../Resources/house.png'）；
从“./components/common/example button”导入示例按钮；
导出默认类TypeSelect扩展组件{
//导航选项
静态导航选项={
标题：空
}
构造函数（）{
超级（）；
此.state={
可见：假，
x：新的动画值（-100），
};
}
幻灯片=（）=>{
动画.spring（this.state.x{
toValue:0，
放松：放松
}).start（）；
这是我的国家({
可见：对，
});
};
gotoSearch=（）=>{
this.props.navigation.navigate（'DocSearch'））
}
componentDidMount（）{
这张幻灯片（）；
}
render（）{
返回(
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1
},
imgBG：{
弹性：1，
flexDirection:“列”，
辩护内容：“中心”，
宽度：“100%”，
身高：“100%”
}
})

它在iOS中运行良好，但在安卓系统中无法达到标准。请帮我在安卓系统中工作。

---

提前感谢。

您应该在

组件上使用

renderToHardwareTextureAndroid

道具

'use strict';

import React, {Component} from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Image,
} from 'react-native';

export default class ExampleButton extends Component {

  constructor (props) {
    super (props);
  }
  _handleOnPress = () => {
    console.log('pressed!!!');
  };

  render () {
    console.log (this.props);
    return (
      <TouchableOpacity
        onPress={this.handleOnPress}
      >
        <View style={styles.btnCompContainer}>
          <View
            style={{
              backgroundColor: '#FFF',
              justifyContent: 'center',
              borderRadius: 30,
              height: 50,
              width: '100%',
            }}
          >
            <Text style={styles.btnTxt}>{this.props.buttonText}</Text>
          </View>

          <View style={[styles.btnElmContainer]}>
            <Image
              style={[{height: 30, width: 30,resizeMode:'stretch'}]}
              source={this.props.image}
            />
          </View>
        </View>

      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create ({
  btnCompContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    height: 60,
    marginLeft: 10,
    marginRight: 20,
  },
  btnElmContainer: {
    position: 'absolute',
    justifyContent: 'center',
    alignItems: 'center',
    width: 60,
    height: 60,
    backgroundColor:'#fff',
    borderRadius: 30,
    shadowColor: '#000000',
    shadowOffset: {
      width: 1,
      height: 1,
    },
    elevation:5,
    shadowRadius: 2,
    shadowOpacity: 0.3,
  },
  btnTxt: {
    marginLeft: 80,
    color: '#9e9e9e',
    fontSize: 16,
    fontWeight: 'bold',
    textAlign: 'left',
  },
});

在您这样的示例中：

   <View style={styles.btnCompContainer} renderToHardwareTextureAndroid >
      <View
        style={{
          backgroundColor: '#FFF',
          justifyContent: 'center',
          borderRadius: 30,
          height: 50,
          width: '100%',
        }}
      >
        <Text style={styles.btnTxt}>{this.props.buttonText}</Text>
      </View>

      <View style={[styles.btnElmContainer]}>
        <Image
          style={[{height: 30, width: 30,resizeMode:'stretch'}]}
          source={this.props.image}
        />
      </View>
    </View>

{this.props.buttonText}

它对我不起作用