时间戳

首页 > 解决方案 > 反应本机页面上带有电话号码的电话图标

reactjs - 反应本机页面上带有电话号码的电话图标

问题描述

我想在我的平面列表中放一个电话图标和电话号码。现在，我只显示电话号码。我的经理要求我将电话图标与用户滑动电话图标一起放置，然后可以拨打电话我有以下代码来显示电话号码。

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

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

任何帮助将不胜感激。

标签： reactjsreact-native

解决方案

我不明白使手机图标可滑动意味着什么。您可以使用如下图标库添加图标：https ://oblador.github.io/react-native-vector-icons/或字体图标库。

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

推荐阅读