android - 从 api json 检索/显示多个超链接（反应本机）

Question

我已经为它创建了一个 Web 应用程序和 api（http://lkcfesnotification.000webhostapp.com/api/notifications），我通过传递 id 来调用我的详细通知（http://lkcfesnotification.000webhostapp.com/api/notifications/ 33 ). 从 api 我可以检索我的标题、描述等，包括我存储在我的服务器中的图像 ( http://lkcfesnotification.000webhostapp.com/storage/ {api 路径})。现在我想创建超链接以从与我的图像文件具有相同路径的存储中下载我的文件。但是我附件的json api问题是这样的

 ("attachment": "`[{\"download_link\":\"notifications\\\/August2019\\\/SXMtnNb31ndgDnCWNC57.txt\",\"original_name\":\"dsadasdsa.txt\"},)

where 像我的图像一样排列在数组中，但有“下载链接”。如何从我的数组/json 中检索超链接

这是我尝试过的事情：

let attachment = member && JSON.parse(member.attachment);

然后是超链接：

<Text style={styles.TextStyle} onPress={ ()=> Linking.openURL('http://lkcfesnotification.000webhostapp.com/storage/' + attachment[0]) } >Click here for to Download file</Text>

import React, { Component } from 'react';
import {
  Alert,
  Image,
  StyleSheet,
  ScrollView,
  View,
  Text,
  Linking,
} from 'react-native';
import {
  InputWithLabel
} from './UI';
import { FloatingAction } from 'react-native-floating-action';

type Props = {};
export default class ShowScreen extends Component<Props> {
  static navigationOptions = ({navigation}) => {
    return {
      title: navigation.getParam('headerTitle')
    };
  };

  constructor(props) {
    super(props)

    this.state = {
      id: this.props.navigation.getParam('id'),
      member: '',
    };

    this._load = this._load.bind(this);
  }

  componentDidMount() {
    this._load();
  }

  _load() {
    let url = 'http://lkcfesnotification.000webhostapp.com/api/notifications/' + this.state.id;

    fetch(url)
    .then((response) => {
      if(!response.ok) {
        Alert.alert('Error', response.status.toString());
        throw Error('Error ' + response.status);
      }

      return response.json()
    })
    .then((member) => {
      this.setState({member});
    })
    .catch((error) => {
      console.error(error);
    });
  }

  render() {
    let member = this.state.member;
   // let af = 'http://lkcfesnotification.000webhostapp.com/storage/';
    console.log(member);
    console.log(member.image);
    let image = member && JSON.parse(member.image);
    let attachment = member && JSON.parse(member.attachment);
    return (
      <View style={styles.container}>
        <ScrollView>
          <InputWithLabel style={styles.output}
            label={'Title'}
            value={member ? member.title : ''}
            orientation={'vertical'}
            multiline={true}
            editable={false}
          />
          <InputWithLabel style={styles.output}
            label={'Department'}
            value={member ? member.department : ''}
            orientation={'vertical'}
            editable={false}
          />
          <InputWithLabel style={styles.output}
            label={'Publish'}
            value={member ? member.updated_at : ''}
            orientation={'vertical'}
            editable={false}
          />
          <InputWithLabel style={[styles.output, {height: 600, textAlignVertical: 'top'}]}
            label={'Description'}
            value={member ? member.description : ''}
            orientation={'vertical'}
            editable={false}
            multiline={true}
          />          
          <Text>
          {image && image.length && image.map(image => {
      return <Image 
            source={{uri: 'http://lkcfesnotification.000webhostapp.com/storage/' + image}}
            style={{width: 300, height: 300}}
            orientation={'vertical'}
          />  
   })
}
</Text>
<Text style={styles.TextStyle} onPress={ ()=> Linking.openURL('http://lkcfesnotification.000webhostapp.com/storage/' + attachment[0]) } >Click here for to Download file</Text>  
<Text style={styles.TextStyle} onPress={ ()=> Linking.openURL(member.link) } >Click here for More Detail</Text>   
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  output: {
    fontSize: 24,
    color: '#000099',
    marginTop: 10,
    marginBottom: 10,
  },
    TextStyle: {

    color: '#E91E63',
    textDecorationLine: 'underline',
    fontSize: 30

  },
});

我的预期输出是显示 JSON 中的所有超链接，称为“download_link”

标签： androidreactjsapireact-native