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

Question

我想在我的平面列表中放一个电话图标和电话号码。现在，我只显示电话号码。我的经理要求我把手机图标放在一起。当用户滑动手机图标时，就可以拨打电话了。我有以下代码来显示电话号码。

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
[phone]
_________________
213 Test drive1
[phone]

我想放上手机图标，让它可以滑动，这样用户就可以用手机打电话了。

任何帮助都将不胜感激。

Answer 1

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

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