React Native — Лента на състоянието и стилове на изображения

React Native е мобилна разработка, базирана на React, която можем да използваме за извършване на мобилна разработка.

В тази статия ще разгледаме как да го използваме, за да създадем приложение с React Native.

Лента за състоянието

StatusBar ни позволява да контролираме лентата на състоянието с нашето приложение.

Например, можем да напишем:

import React, { useState } from 'react';
import { Button, StyleSheet, StatusBar, View } from "react-native";
import Constants from "expo-constants";
export default function App() {
  const [visibleStatusBar, setVisibleStatusBar] = useState(false);
  const changeVisibilityStatusBar = () => {
    setVisibleStatusBar(!visibleStatusBar);
  };
  return (
    <View style={styles.container}>
      <StatusBar backgroundColor="blue" barStyle='dark-content' />
      <View>
        <StatusBar hidden={visibleStatusBar} />
      </View>
      <View style={styles.buttonContainer}>
        <Button title="Toggle StatusBar" onPress={() => changeVisibilityStatusBar()} />
      </View>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: Constants.statusBarHeight,
  },
  scrollView: {
    flex: 1,
    backgroundColor: 'pink',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Добавихме StatusBar, който може да се превключва с проп hidden.

И също така добавихме такъв, който има backgroundColor, зададен на 'blue'.

barStyle задава стила на лентата на състоянието, който е 'dark-content'.

Може също да се настрои на 'default' и ‘light-content’.

Подпорки за стил на изображение

Можем да настроим нашето изображение да се показва със стила, който желаем.

Например, можем да напишем:

import React from 'react';
import { View, Image } from "react-native";
export default function App() {
  return (
    <View>
      <Image
        style={{
          resizeMode: "cover",
          height: 100,
          width: 200
        }}
        source={{ uri: 'https://i.picsum.photos/id/23/200/300.jpg?hmac=NFze_vylqSEkX21kuRKSe8pp6Em-4ETfOE-oyLVCvJo' }}
      />
    </View>
  );
}

за да зададете width и height .

resizeMode задава как се преоразмерява изображението.

Можем да го зададем на 'cover' , 'contain' , 'stretch' , 'repeat' или 'center' .

Също така можем да зададем цвета на нюанса. Например, можем да напишем:

import React from 'react';
import { View, Image } from "react-native";
export default function App() {
  return (
    <View>
      <Image
        style={{
          tintColor: "lightgreen",
          resizeMode: "contain",
          height: 100,
          width: 200
        }}
        source={{ uri: 'https://i.picsum.photos/id/23/200/300.jpg?hmac=NFze_vylqSEkX21kuRKSe8pp6Em-4ETfOE-oyLVCvJo' }}
      />
    </View>
  );
}

Тогава можем да видим, че изображението е светлозелена кутия, вместо да показва оригиналното изображение.

Също така можем да добавим граница около нашето изображение.

Например, можем да напишем:

import React from 'react';
import { View, Image } from "react-native";
export default function App() {
  return (
    <View>
      <Image
        style={{
          borderColor: "red",
          borderWidth: 5,
          height: 100,
          width: 200
        }}
        source={{ uri: 'https://reactnative.dev/docs/assets/p_cat2.png' }}
      />
    </View>
  );
}

Задаваме borderColor на 'red' и borderWidth на 5, за да добавим границата.

Също така можем да добавим радиус на границата към изображение, като напишем:

import React from 'react';
import { View, Image } from "react-native";
export default function App() {
  return (
    <View>
      <Image
        style={{
          borderTopLeftRadius: 10,
          borderTopRightRadius: 10,
          borderBottomLeftRadius: 10,
          borderBottomRightRadius: 10,
          height: 100,
          width: 200
        }}
        source={{ uri: 'https://i.picsum.photos/id/23/200/300.jpg?hmac=NFze_vylqSEkX21kuRKSe8pp6Em-4ETfOE-oyLVCvJo' }}
      />
    </View>
  );
}

Задаваме радиуса на границата за изображението за всеки ъгъл с тези свойства.

Заключение

Можем да контролираме лентата на състоянието и да манипулираме изображения с React Native.