2017-08-17 80 views
0

是否有可能删除/忽略反应原生应用程序中的特色图像,同时使用react-native-html-view依赖关系从WordPress博客中获取数据?反应本机json解析

enter image description here

我使用:

"native-base": "^2.3.0", 
    "react": "16.0.0-alpha.12", 
    "react-native": "^0.46.4", 
    "react-native-fit-image": "^1.5.2", 
    "react-native-htmlview": "^0.12.0", 
    "react-native-interactable": "0.0.9", 
    "react-native-router-flux": "^3.38.0", 
    "react-native-vector-icons": "^4.3.0", 
    "react-navigation": "^1.0.0-beta.11", 
    "wpapi": "^1.1.2" 

其实,我只需要博客没有图像的文本,并使用react-native-html-view我得到的图像太这是不是我的要求。

import React, { Component } from 'react'; 
    import { 
     ActivityIndicator, 
     ListView, 
     Text, 
     StyleSheet, 
     View 
    } from 'react-native'; 
    import HTMLView from 'react-native-htmlview'; 
    export default class Home extends Component { 
     constructor(props) { 
     super(props); 
     this.state = { 
     isLoading: true 
    } 
} 
    componentDidMount() { 
     return fetch('http://www.cardory.co.uk/jan/json') 
    .then((response) => response.json()) 
    .then((responseJson) => { 
    let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
    this.setState({ 
     isLoading: false, 
     dataSource: ds.cloneWithRows(responseJson.items), 
    }, function() { 
     // do something with new state 
    }); 
    }) 
    .catch((error) => { 
    console.error(error); 
    }); 
    } 

     render() { 
if (this.state.isLoading) { 
    return (
    <View style={{flex: 1, paddingTop: 60}}> 
     <ActivityIndicator /> 
    </View> 
); 
} 

return (
    <View style={{flex: 1, paddingTop: 60}}> 
    <ListView 
    dataSource={this.state.dataSource} 
    renderRow={(rowData) => 

     <Card> 
     <CardItem> 
      <Text style={styles.titleHeading}>{rowData.title}</Text> 
     </CardItem> 

     <CardItem> 
      <HTMLView value={rowData.content_html}/> 
     </CardItem> 
     </Card> 

    } 
    /> 
    </View> 
); 
     } 
    } 
    const styles=StyleSheet.create({ 
     textHeading:{ 
fontSize:20, 
marginTop:20 
     }, 
     titleHeading:{ 
     fontSize:20, 
     fontWeight:'bold', 
     color:'black', 
     alignItems:'center', 
     } 
    }); 
    module.export=Home; 

回答

0

您可以像跟踪,以便消除图像标签后传中HTMLView数据如果在HTML字符串中没有图像会显示没有图像

<HTMLView value={rowData.content_html.replace(/<img[^>]*>/g,"")}/>

+1

它的作品,感谢您的答复! –