Question

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

我已经将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',
  },
});

我在代码中使用此可重用组件。

    '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%"
  }
})

在iOS上运行正常，但在android上无法正常运行。请帮助我在android中工作。预先感谢。

Answer 1

您应该在westus.api.cognitive.microsoft.com/Qnamaker组件上使用renderToHardwareTextureAndroid道具。

在这样的示例中：

<View />

React Native（android），组件重叠阴影问题

1 个答案: