如何使用React Native Part＃17构建WordPress应用：修复react-native-render-html-优快云博客

本系列旨在展示我如何使用react native构建应用程序以从WordPress博客提供内容。由于我的博客谈论的是本机反应，因此该系列和文章相互联系。我们将学习如何设置许多使我们的生活舒适的程序包，并学习如何处理WordPress API。在此，本书中讨论的最突出的功能是深色主题，脱机模式，无限滚动等等。您可以在本系列中找到更多内容。本教程系列的灵感来自instamobile的React Native App Templates

在这里， react-native-render-html中的组件不会自动更改主题。因此，我们也需要修复它们。为此，我们将提供react-native-paper包中名为withTheme的高阶组件，并将屏幕传递到其中。

首先，我们需要导入到Home.js文件中，如下面的代码片段所示：

import {Headline,Card, withTheme} from 'react-native-paper' ;

然后，在导出Home屏幕的Home组件时，我们需要使用withTheme模块将其包装到react-native-paper包中，如下面的代码片段所示：

export default withTheme(Home);

现在，我们将能够访问屏幕道具中的主题变量，如下面的代码片段所示：

render() {
        const {colors} = this .props.theme;
        return (

接下来，我们需要将tagStyles支撑的通过颜色代码
HTMLRender组件，如下面的代码片段所示：

   <HTMLRender
      html={item.excerpt.rendered}
      tagsStyles={{ p : { color : colors}}}
    />

其他屏幕也需要此过程。因此，我们将不再实现可以一次在所有屏幕上共享的新组件，而不必一次又一次地重复相同的过程。

实施卡组件

在这里，我们将实现卡片组件，该组件代表在“主页”，“类别”和“书签”屏幕中显示文章的卡片列表。

为此，我们需要在'./src/components/'文件夹中创建一个名为Cards.js的新文件。然后，我们需要将以下cdode片段中的代码用于Cards.js文件：

 import React, {Component, useContext} from 'react' ;
    import {View, StyleSheet, TouchableOpacity} from 'react-native' ;
    import {Avatar, Button, Card, Title, Paragraph} from 'react-native-paper' ;
    import HTMLRender from 'react-native-render-html' ;
    import moment from 'moment' ;
    export default ({item, navigation, textColor}) => {
      return (
        < TouchableOpacity
          onPress = {() =>
            navigation.navigate('SinglePost', {
              post_id: item.id,
            })
          }>
           <Card
            style={[
              {
                shadowOffset: {width: 5, height: 5},
                width: '90%',
                borderRadius: 12,
                alignSelf: 'center',
                marginBottom: 10,
              },
            ]}>
            <Card.Content>
              <Title>{item.title.rendered}</Title>
              <Paragraph>Published on {moment(item.date).fromNow()}</Paragraph>
            </Card.Content>
            <Card.Cover source={{uri: item.jetpack_featured_media_url}} />
            <Card.Content>
              <Card.Content>
                <HTMLRender
                  html={item.excerpt.rendered}
                  tagsStyles={{p: {color: textColor}}}
                />
              </Card.Content>
            </Card.Content>
          </Card>
        </TouchableOpacity>
      );
    };

在这里，我们已经导入并实现了在屏幕上显示卡界面所需的每个组件。我们提供的步骤如下：

首先，我们从父屏幕或组件接收所需的prop参数
其次，我们以与之前在“主页”和其他屏幕中显示的相同的方式来实现“卡片式” UI组件
我们还根据prop传递的react-navigation事件配置导航
我们从传递给prop的主题变量中配置textColor

现在，我们需要将Card.js文件导入回Home.js文件，并使用它在主屏幕中显示名片模板。为此，我们需要使用以下代码片段中的代码：

 <FlatList
              data={ this .state.lastestpost}
              onRefresh={() => this .onRefresh()}
              refreshing={ this .state.isFetching}
              onEndReached={ this .handleLoadMore}
              onEndReachedThreshold={ 0.1 }
              ListFooterComponent={ this .renderFooter}
              renderItem={({item}) => (
                < Card
                  item = {item}
                  navigation = {this.props.navigation}
                  textColor = {colors.text}
                />
              )}
              keyExtractor={item => item.id}
            />

在这里，我们将Card.js文件作为Card组件导入，并在FlatList组件内部使用了它。 Card组件设置有传递到Card.js的所有必要道具。

因此，我们将在仿真器屏幕中获得以下结果：