Как складывать просмотры в React Native?

Это может показаться простым вопросом, но мне нужно сложить несколько разных представлений друг на друга и программно скрыть / показать их. Каждый из них должен заполнить 100% ширины и высоты области просмотра и быть наложен поверх других.

В CSS я бы просто сделал это.

.screen{
    width: 100%,
    height: 100%,
    position: absolute,
    z-index: 1 // Increasing as they stack
}

... но реагирующий родной эквивалент, похоже, не работал, слой полностью исчез с экрана. Кроме того, я использую Expo, чтобы показать это на своем телефоне с Android, поэтому у меня нет доступа к инспектору инструментов разработки, как в Chrome, чтобы узнать, что не так.

Может показаться, что мне нужен маршрутизатор, и я собираюсь использовать его для переключения между моими основными маршрутами, но это больше для создания многоуровневого фонового эффекта, который мне нужно сидеть за всеми экранами.

react-native

19.08.2018 21:37

Умерло ли Create-React-App?

В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.

Освоение React Native: Пошаговое руководство для начинающих

React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...

Ускоренная стилизация компонентов React Native с помощью NativeWind

В чем разница между react native и react ?

React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...

От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React

Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...

Хуки React: что это такое и как их использовать

Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...

400

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно добавить top:0 и left:0, также это zIndex, а не z-index. Попробуй это:

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

type Props = {};
export default class App extends Component<Props> {
  state = { screenToShow: 0 };
  componentDidMount() {
    this.changeScreen();
  }
  changeScreen() {
    setTimeout(() => {
      this.setState(
        {
          screenToShow: (this.state.screenToShow + 1) % 4,
        },
        this.changeScreen
      );
    }, 1000);
  }
  render() {
    const screenToShow = this.state.screenToShow;
    return (
      <View style = {styles.container}>
        <View
          style = {[
            styles.screen,
            { zIndex: screenToShow === 0 ? 1000 : -1, backgroundColor: 'red' },
          ]}
        />
        <View
          style = {[
            styles.screen,
            { zIndex: screenToShow === 1 ? 1000 : -1, backgroundColor: 'blue' },
          ]}
        />
        <View
          style = {[
            styles.screen,
            {
              zIndex: screenToShow === 2 ? 1000 : -1,
              backgroundColor: 'green',
            },
          ]}
         />
        <View
          style = {[
            styles.screen,
             {
              zIndex: screenToShow === 3 ? 1000 : -1,
              backgroundColor: 'yellow',
            },
          ]}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
   },
  screen: {
    position: 'absolute',
    height: '100%',
    width: '100%',
    top: 0,
    left: 0,
  },
});

Спасибо это прекрасно

— 20.08.2018 19:51

19.08.2018 22:39