web-dev-qa-db-fra.com

React Native - Ajoutez une superposition de cercle masqué sur l'image

Comment allusion à ajouter une superposition circulaire opaque sur une image dans React natif? Semblable au sélecteur d'images Instagram:

enter image description here

comme une tâche triviale, cela peut sembler, j'ai eu un monde de difficulté à reproduire cela. Aucune suggestion?

javascriptreactjsreact-nativeimage-masking
8
John Jackson

Comme une personne mentionnée dans les commentaires, la manière de y parvenir est avec réagit de vue masquée indigène .

Installez-le dans votre projet en exécutant:

npm install -S @react-native-community/masked-view

ou

yarn add @react-native-community/masked-view

Ensuite, vous pouvez l'utiliser comme suit. J'ai adapté l'exemple de leur README pour vous ici:

import MaskedView from '@react-native-community/masked-view';
import React from 'react';
import { View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: '#000000', // "Edge" background
          maxHeight: 400,
        }}
      >
        <MaskedView
          style={{ flex: 1 }}
          maskElement={
            <View
              style={{
                // Transparent background mask
                backgroundColor: '#00000077', // The '77' here sets the alpha
                flex: 1,
              }}
            >
              <View
                style={{
                  // Solid background as the aperture of the lens-eye.
                  backgroundColor: '#ff00ff',
                  // If you have a set height or width, set this to half
                  borderRadius: 200,
                  flex: 1,
                }}
              />
            </View>
          }
        >
          {/* Shows behind the mask, you can put anything here, such as an image */}
          <View style={{ flex: 1, height: '100%', backgroundColor: '#324376' }} />
          <View style={{ flex: 1, height: '100%', backgroundColor: '#F5DD90' }} />
          <View style={{ flex: 1, height: '100%', backgroundColor: '#F76C5E' }} />
          <View style={{ flex: 1, height: '100%', backgroundColor: '#2E6D3E' }} />
        </MaskedView>
      </View>
    );
  }
}
2
Labu
import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  View,
  Image,
  Text
} from 'react-native';

const Test = () => {
  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={styles.container}>
        <Image
          source={{
            uri: 'https://raw.githubusercontent.com/AboutReact/sampleresource/master/old_logo.png'
          }}
          //borderRadius will help to make Round Shape
          style={{
            width: 200,
            height: 200,
            borderRadius: 200 / 2
          }}
        />
        <Text style={styles.textHeadingStyle}>
          About React
        </Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#e0dcdc',
  },
  textHeadingStyle: {
    marginTop: 30,
    fontSize: 40,
    color: '#0250a3',
    fontWeight: 'bold',
  },
});

export default Test;
0
sohaib abro