J'essaie de créer une interface utilisateur dans react-native comme dans l'image ci-dessous :

enter image description here

Jusqu'à présent je ne peux faire que ça :

enter image description here

Mais y a-t-il un moyen approprié de le faire?

  <View style={styles.frame1}>
    <View  style={styles.frameBefore}></View>
    <View style={styles.frame2}>
      <TextInput/>
    </View>
  </View>

  frame1: {
    flexDirection: 'row',
    margin: 10,
    borderColor: LightColorLine,
    borderStyle:'solid',
    borderWidth: 0.5,
    backgroundColor: LightColorBackgr,
    padding:10,
  },
  frame2:{
    backgroundColor: LightColorTextBackgr,
    padding: -50,
    flex: 0.98,
  },
  frameBefore:{
    width: 0,
    height: 60,
    borderRightWidth: 0.9,
    borderColor: LightColorLine,
    borderStyle:'solid',
    shadowColor: '#000000',
    shadowOffset: {
      width: 0,
      height: 10,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
    flex: 0.01,
    transform: [{ 
      rotate: '45deg'
    }]
  },
3
An Anita 7 févr. 2020 à 00:33

1 réponse

Meilleure réponse

Voici le plus proche que j'ai pu obtenir

enter image description here

La partie délicate consistait à créer l'ombre sur un angle, d'autant plus que l'offre React-Native de l'API pour les ombres diffère tellement entre iOS et Android.

Pour surmonter cela, j'ai utilisé un dégradé linéaire qui n'est pas inclus par défaut par React Native. J'ai utilisé expo-linear-gradient mais il y en a quelques autres que vous pouvez utiliser si vous préférez.

export const Triangle = props => (
  <View style={props.style}>
    <LinearGradient
      colors={['black', 'transparent']}
      start={[0, 0]}
      end={[0.5, 0.5]}
      style={styles.triangleShadow}
    />
    <View style={styles.triangle} />
  </View>
);

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.card}>
          <Text style={styles.text}>Be Cool.</Text>
          <Triangle style={styles.topLeftTriangle} />
          <Triangle style={styles.bottomRightTriangle} />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 32,
  },
  text: {
    fontSize: 18,
    padding: 32,
    paddingVertical: 48,
    fontWeight: 'bold',
    borderWidth: 1,
    backgroundColor: '#F66F6F',
    color: 'white',
    borderColor: 'gray',
  },
  card: {
    borderWidth: 1,
    padding: 8,
    borderColor: 'gray',
  },
  triangle: {
    width: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderRightWidth: 80,
    borderTopWidth: 80,
    borderRightColor: 'transparent',
    borderTopColor: '#ecf0f1',
  },
  triangleShadow: {
    height: 90,
    width: 90,
    position: 'absolute',
    top: 0,
    left: 0,
  },
  topLeftTriangle: {
    position: 'absolute',
    top: -10,
    left: -10,
  },
  bottomRightTriangle: {
    position: 'absolute',
    bottom: -10,
    right: -10,
    transform: [{ rotate: '180deg' }],
  },
});
2
CampbellMG 6 févr. 2020 à 22:38