Блог

Я изучаю 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) Немного погуглив, я обнаружил, что мне следует использовать, 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. Стилизованные компоненты не принимают в себе строки, поэтому вы не можете отправить ’10px’ из реквизита.
2. Вы правы, что для заполнения требуется пиксель в конце. Что-то, что заполняет само по себе, не работает, но вы можете обойти это, добавив paddingVertical и paddingHorizontal с тем же значением, что и 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. Для остальных, которые имеют постоянные стили, которые никогда не меняются, я просто использую обычные объекты styles, поскольку они менее подробные.

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

Приветствия