React Native页面上带有电话号码的电话图标

时间:2018-07-16 20:43:49

标签: reactjs react-native

我想将电话图标以及电话号码放到我的固定列表中。现在,我只显示电话号码。我的经理要求我在用户滑动电话图标时同时放置电话图标,然后才能发出呼叫。我有以下代码来显示电话号码。

import React, { Component } from 'react';

import { AppRegistry, StyleSheet, FlatList, Text, View, Alert, TouchableOpacity, Linking } from 'react-native';
import ServiceDetails from '../reducers/ServiceDetails.json';

export default class ServiceListDetails extends Component {

  FlatListItemSeparator = () => {
    return (
      <View
        style={{
          height: .5,
          width: "100%",
          backgroundColor: "#607D8B",
        }}
      />
    );
  }


_renderItem = ({item}) => {


 return(
            <View >
                <Text style={styles.Address1}>{item.addr} </Text>
                <Text style={styles.Address1}>{item.phone}</Text>
           </View>
           );
           }

componentDidCatch
render()
  {
   return(

     <View>
         <FlatList
          ItemSeparatorComponent = {this.FlatListItemSeparator}
          renderItem={this._renderItem}
          keyExtractor={(item, index) => index}
    />


     </View>
  )
  }
  }

现在,我可以看到

410 Test Drive
(912) 404-5555
_________________
213 Test drive1
(999) 222-1111

我想放置电话图标并使其可滑动,以便用户可以通过电话拨打电话。

任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

我不明白如何使电话图标可滑动。您可以使用https://oblador.github.io/react-native-vector-icons/这样的图标库或字体图标库来添加图标。

然后,您可以使用像这样的库来执行调用:https://www.npmjs.com/package/react-native-phone-call