React-Native: маржа с процентным значением - PullRequest
Новая
       29

React-Native: маржа с процентным значением

0 голосов
/ 23 мая 2018

Я пытаюсь использовать процентное значение для атрибута стиля поля в моем проекте React Native, но, похоже, он уменьшает высоту одного из моих компонентов View.Если я заменю процентное значение на абсолютное значение, проблема больше не возникает, и она работает нормально.Вы пытались использовать процентное значение в качестве маржи в React Native?Вот небольшой пример кода для воспроизведения этой проблемы: 

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.scene}>
        <View style={styles.card}>
          <View style={styles.container}>
            <Text>Hello World</Text>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    scene: {
        backgroundColor: '#F9E8D5',
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        flexDirection: 'column'
    },
    card: {
        backgroundColor: '#E6D5C3',
        flex: 0.2,
        flexDirection: 'column',
        marginTop: '20%' // Replace by 20
    },
    container: {
        backgroundColor: '#FFFFFF',
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center'
    }
});

Большое спасибо!

1 Ответ

0 голосов
/ 23 мая 2018

Высота и ширина компонента определяют его размер на экране.

Самый простой способ установить размеры компонента - добавить фиксированные ширину и высоту к стилю.Все размеры в React Native являются безразмерными и представляют собой независимые от плотности пиксели.

Настройка размеров таким способом является общей для компонентов, которые должны всегда отображаться с одинаковым размером, независимо от размеров экрана.

Используйте flex в стиле компонента, чтобы компонент динамически расширялся и уменьшался в зависимости от доступного пространства.Обычно вы будете использовать flex: 1.

Следующие ссылки будут использоваться для стиля

  1. https://facebook.github.io/react-native/docs/height-and-width.html

  2. https://medium.com/the-react-native-log/tips-for-styling-your-react-native-apps-3f61608655eb

  3. https://facebook.github.io/react-native/docs/layout-props.html#paddingtop

    Используйте Размеры, чтобы вычислить, чтобы получить высоту и ширину экрана. 

    var {height, width} = Dimensions.get('window');

    Чтобы указать процентное соотношение, получив размер экрана и преобразовавв процентах.

    Пример примера: 

    const { height } = Dimensions.get('window');

paddingTop: height * 0.1 // 10 percentage of the screen height
...