如何从 react-native-paper 将 css 应用于 <Card.Content> 组件内的 <Text> 组件？答案

【问题标题】：How to apply css to the <Text> component inside <Card.Content> component from react-native-paper?如何从 react-native-paper 将 css 应用于 <Card.Content> 组件内的 <Text> 组件？
【发布时间】：2020-07-29 09:07:49
【问题描述】：

我正在开发 React Native 0.62，我在其中使用 react-native-paper 作为卡片。我已经在 Card.Content 组件中使用了 react-native 。但是用户界面并不像我想要的那样。我尝试使用嵌套组件，它可以工作，但其他 css 不会像填充等一样适用于它。感谢任何帮助。

预期输出：

当前用户界面：

代码：

 <Card.Content style={{ paddingTop: 10 }}>
                {this.props.data.getHolidays.loading ?
                  (<View style={{ width: 'auto', height: 175, justifyContent: 'center', alignItems: 'center' }}><ActivityIndicator color="#6CCFF6" size="large" /></View>)
                  :
                  Object.keys(this.props.data.getHolidays.holidays).length == 0 ?
                    (<View style={{ width: 'auto', height: 175, justifyContent: 'center', alignItems: 'center' }}><Text style={{ fontFamily: 'OpenSans-Regular', fontSize: 14, color: 'black' }}>Not Available</Text></View>) :

                (
                  Object.keys(this.props.data.getHolidays.holidays).map(key => (
                    <>
                      <Caption style={{ fontFamily: 'OpenSans-Regular', fontSize: 14, color: '#CFCFCF', marginBottom: 10, }}>{key}</Caption >
                      {this.props.data.getHolidays.holidays[key].map((holidayList, index) => (                            

                        <View style={{ borderRadius: 5, backgroundColor: (index % 2 == 0) ? '#596AB2' : '#48657D', marginBottom: 10 }} key={index}>

                          <Text style={{ fontFamily: 'OpenSans-Regular', fontSize: 14, color: '#FFFFFF', paddingVertical: 6, paddingHorizontal: 10 }}>
                            {moment(holidayList.holidayDate).format('ddd')} {moment(holidayList.holidayDate).format('Do')} - {holidayList.holidayEvent}</Text>
                        </View>
                      ))}
                    </>
                  ))
                )
            }
          </Card.Content>

【问题讨论】：

标签： javascript css react-native

【解决方案1】：

当您将文本放在视图中时，这与卡片样式无关，它会占用整个空间

您可以为包装视图放置一个assignSelf，这将解决您的问题。

  <View
    style={{
      borderRadius: 5,
      backgroundColor: '#48657D',
      marginBottom: 10,
      alignSelf:'flex-start'
    }}>
    <Text
      style={{
        fontFamily: 'OpenSans-Regular',
        fontSize: 14,
        color: '#FFFFFF',
        paddingVertical: 6,
        paddingHorizontal: 10,
      }}>
      {"1232"}
      {"123"} -
      {"Event goes here"}
    </Text>
  </View>

【讨论】：