Как показать View в стиле (используя styled-компоненты) View - React Native - PullRequest
Новая
       14

Как показать View в стиле (используя styled-компоненты) View - React Native

1 голос
/ 09 марта 2019

Я изучаю React Native и стилизованные компоненты. Я работаю над простым приложением для iOS и сталкиваюсь с некоторыми проблемами с styled-components.

Что я пытаюсь сделать

Я пытаюсь показать modal при клике, который выглядит следующим образом 

<Modal visible={this.state.isModalVisible} animationType={'fade'}>
    <StyledView flex={1} padding={10} backgroundColor={'orange'}>
        <View>
            ...more Views and Texts
        </View>
    </StyledView>
</Modal>

StyledView - это пользовательское представление, созданное мной с использованием styled-components, которое выглядит следующим образом 

const ViewWrapper = styled.View`
  flex: ${props => props.flex};
  padding: ${props => props.padding};
  backgroundColor: ${props => props.backgroundColor};
`;

const StyledView = ({ flex, padding, backgroundColor }) => (
  <ViewWrapper
    flex={flex}
    padding={padding}
    backgroundColor={backgroundColor}
  />
);

export default StyledView;

У меня проблемы

1) Когда я устанавливаю padding={10}, я получаю ошибку Failed to parse declaration "padding: 10".

2) После небольшого поиска в Google я обнаружил, что должен использовать padding={'10px'}, который выдает эту ошибку, 10px is of type NSString cannot be converted to YGValue. Did you forget the % or pt suffix?.

(padding={'10%'} отлично работает)

Тогда я просто попытался установить значения flex и padding в ViewWrapper и отправить только цвет фона как prop.

3) Но по какой-то причине View s и Text s, вложенные в StyledView, не отображаются.

Пожалуйста, скажите мне, почему это не работает, и помогите мне понять, что мне здесь не хватает. Спасибо.

1 Ответ

0 голосов
/ 10 марта 2019

У вас есть пара вопросов.

  1. Стилизованные компоненты не принимают в них строки, поэтому вы не можете отправить «10px» из реквизита.
  2. Вы правы, что для заполнения в конце необходим пиксель.Само по себе дополнение не работает, но вы можете обойти это, добавив paddingVertical и paddingHor horizontal с тем же значением, которое совпадает с padding.
  3. Вы слишком усложняете реализацию, так как вам не нужно пропускать реквизиты стиля, и вы можете определить их все в своем стилизованном компоненте.Например:

импорт в стиле из "styled-components / native" 

const StyledView = styled.View`
   flex: 1;
   padding: 10px;
   backgroundColor: orange
`;

И затем вы просто используете его так: 

<Modal visible={this.state.isModalVisible} animationType={'fade'}>
    <StyledView>
        <View>
            ...more Views and Texts
        </View>
    </StyledView>
</Modal>

Нетнужен для ViewWrapper или более реквизита.Кроме того, и это только личное.Я использую StyledComponents только для тех, которые могут изменяться во время выполнения или зависеть от темы, например exts для fontFamily или fontSize.Для остальных, которые имеют постоянные стили, которые никогда не меняются, я просто использую обычные объекты стилей, так как это менее многословно.

Если это упрощенная версия и вам абсолютно необходимы реквизиты, которые вы можете объединить, все они в один объект темы и передать его с помощью ThemeProvider, а затем просто прочитать его как $ {props.theme.backgroundColor} или что-то в этом роде.,

Приветствия

...