ReactNative StyledComponent игнорирует дочерние элементы - PullRequest
Новая
       27

ReactNative StyledComponent игнорирует дочерние элементы

0 голосов
/ 30 марта 2020

Я создаю набор функциональных компонентов в своем коде, так что любой может использовать его, не зная стилизованных компонентов: 

const CustomizableButtonComponent = Styled.TouchableOpacity`
    width:${props => props.width}
    height: ${props => props.height}
    background-color:${props => props.backgroundColor}
    flex-direction:${props => props.flexDirection}
    padding: ${props => props.padding}
    flex: ${props => (props.flex ? props.flex : '0 1 auto')}
    align-items: center
`;

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

export const ButtonWrapper = ({backgroundColor}) => (
  <CustomizableButtonComponent
    backgroundColor={backgroundColor}
    height={'70px'}
    width={'100%'}
    flexDirection={'row'}
    padding={'3px'}
  />
);

Это явно указывает на то, что ему нужна опора backgroundColor. Но это не принимает дочерние элементы по какой-то причине. Ниже фрагмент игнорирует текстовые дочерние элементы и не отображает его. 

return (
    <View>
      <ButtonWrapper backgroundColor="white">
        <Text>Hello</Text>
        <Text>There!</Text>
      </ButtonWrapper>
    </View>
  );

Однако что-то вроде этого работает, почему (то есть текстовые дочерние элементы фактически визуализируются) 

export const ButtonWrapper1 = Styled.TouchableOpacity`
    width:100%
    height: 50px
    background-color:${props => props.backgroundColor}
    flex-direction:row
    padding: 3px
    flex: 0 1 auto
    align-items: center
`;

return (
    <View>
      <ButtonWrapper1 backgroundColor="white">
        <Text>Hello</Text>
        <Text>There!</Text>
      </ButtonWrapper1>
    </View>
  );
...