Question

我正在使用react native创建应用程序，我需要允许用户打开其他用户的所有可用社交网络。
我看到了question和这个one，但它们对我不起作用。
任何人都可以帮助

编辑
我知道如何创建图标并调用社交网络的网站，但是，我想要在社交网络应用
中打开用户个人资料我说过，对于instagram，用户个人资料网址会打开应用程序，而Fb会打开网站，

Answer 1

我的项目中使用了以下内容。它是我的本机应用程序的联系我们页面。

对我来说很好。

    import React, { Component } from 'react';
    import { StyleSheet, Text, Dimensions, View, TouchableNativeFeedback, TouchableOpacity, Image, Linking, ScrollView, Platform } from 'react-native';
    import { Icon, Card, CardItem } from 'native-base';
    import Colors from '../config/Colors';
    import Dimens from '../config/Dimens';
    import { RNToasty } from 'react-native-toasty';
    import OneSignal from 'react-native-onesignal';
    import { getStatusBarHeight } from 'react-native-status-bar-height';
    import { colors } from 'react-native-elements';
    import { Header } from 'react-navigation';
    import HeaderBackground from '../components/HeaderBackground';
    
    var width = Dimensions.get('window').width;
    var height = Dimensions.get('window').height;
    class SocialMedia extends Component {
    
        constructor(props) {
            super(props);
        }
    
        static navigationOptions = ({ navigation }) => {
            return {
                header: (props) => <HeaderBackground {...props} />,
                headerStyle: {
                    backgroundColor: Colors.transparent,
                    paddingTop: Platform.OS === 'ios' ? 0 : getStatusBarHeight(),
                    height: Header.HEIGHT + (Platform.OS === 'ios' ? 0 : getStatusBarHeight()),
                },
                title: 'Social Media',
                headerTintColor: Colors.white,
                headerTitleStyle: {
                    fontWeight: 'bold',
                    padding: 5,
                    paddingTop: 10
                },
                headerMode: 'float',
                headerLeft: <Icon
                    onPress={() => navigation.goBack()}
                    name="arrow-back"
                    type='MaterialIcons'
                    style={{ color: 'white', marginLeft: 10, padding: 5, paddingTop: 10 }}
                />,
            }
        }
    
        render() {
            return (
                <View style={styles.container}>
                    <View style={styles.cardContainer}>
                        <TouchableOpacity background={TouchableNativeFeedback.Ripple(Colors.secondaryColor, false)} onPress={() => { Linking.openURL('https://www.facebook.com/max/') }}>
                            <Card style={styles.card}>
                                <CardItem style={styles.cardBody}>
                                    <Image source={require('../assets/icons/Contact_Facebook.jpg')} style={styles.icon} resizeMode='contain' />
                                    <Text style={styles.iconText}>Facebook</Text>
                                </CardItem>
                            </Card>
                        </TouchableOpacity>
    
                        <TouchableOpacity background={TouchableNativeFeedback.Ripple(Colors.secondaryColor, false)} onPress={() => { Linking.openURL('https://www.instagram.com/max/') }}>
                            <Card style={styles.card}>
                                <CardItem style={styles.cardBody}>
                                    <Image source={require('../assets/icons/Contact_Insta.jpg')} style={styles.icon} resizeMode='contain' />
                                    <Text style={styles.iconText}>Instagram</Text>
                                </CardItem>
                            </Card>
                        </TouchableOpacity>
    
                        <TouchableOpacity background={TouchableNativeFeedback.Ripple(Colors.secondaryColor, false)} onPress={() => { Linking.openURL('https://www.youtube.com/channel/UCnQoipGmBRC1XTOUY8c1UdA') }}>
                            <Card style={styles.card}>
                                <CardItem style={styles.cardBody}>
                                    <Image source={require('../assets/icons/Contact_YT.jpg')} style={styles.icon} resizeMode='contain' />
                                    <Text style={styles.iconText}>YouTube</Text>
                                </CardItem>
                            </Card>
                        </TouchableOpacity>
    
                        <TouchableOpacity background={TouchableNativeFeedback.Ripple(Colors.secondaryColor, false)} onPress={() => { Linking.openURL('https://max.com/') }}>
                            <Card style={styles.card}>
                                <CardItem style={styles.cardBody}>
                                    <Image source={require('../assets/icons/Contact_web.jpg')} style={styles.icon} resizeMode='contain' />
                                    <Text style={styles.iconText}>Website</Text>
                                </CardItem>
                            </Card>
                        </TouchableOpacity>
    
                    </View>
                </View>
            );
        }
    }
    
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            padding: 8
        },
        contentContainer: {
            paddingBottom: 20
        },
        cardContainer: {
            flex: 1,
            padding: 5,
            width: '100%',
        },
        card: {
            padding: 5,
            height: height * .20,
            width: '100%',
            backgroundColor: '#fff',
            flexDirection: 'column',
            //alignItems: 'center',
            //justifyContent: 'center',
            shadowColor: '#1A9EAEFF',
            shadowOffset: { width: 3, height: 3 },
            shadowOpacity: 3,
            shadowRadius: 2,
            elevation: 10,
            borderRadius: 5,
            overflow: 'hidden'
        },
        cardBody: {
            flex: 1,
            flexDirection: 'row',
        },
        iconText: {
            flex: 1,
            fontWeight: 'bold',
            alignItems: 'center',
            justifyContent: 'center',
            fontSize: 18,
            color: '#1A9EAEFF'
        },
        icon: {
            flex: 1,
            width: '100%',
            height: width * .18,
        },
    });
    
    
    export default SocialMedia;

希望这会有所帮助。

你很好走！！

如何从我的应用程序打开Facebook，Instagram ..（社交网络）个人资料

1 个答案: