facebook-login - 在 React Native 中连续放置 3 个图像图标

Question

对于社交媒体登录，我想放置如下图所示的社交媒体图标。如何 在此处输入图像描述

Answer 1

尝试这个：

<View style={{ height: 100, alignItems: 'center', justifyContent: 'center' }}>
            <View style={{ flexDirection: 'row' }}>
                    <TouchableOpacity onPress={() => { }}>
                        <MaterialCommunityIcons style={{ padding: 3 }} name="facebook" size={15} color="white" />
                    </TouchableOpacity>

                    <TouchableOpacity onPress={() => { }}>
                        <MaterialCommunityIcons style={{ padding: 3 }} name="google" size={15} color="white" />
                    </TouchableOpacity>

                    <TouchableOpacity onPress={() => { }}>
                        <MaterialCommunityIcons style={{ padding: 3 }} name="twitter" size={15} color="white" />
                    </TouchableOpacity>
            </View>
        </View>

用于MaterialCommunityIcons图标。如果你在Expo做：

import { MaterialCommunityIcons } from '@expo/vector-icons';

Answer 2

您必须在flexDirectionset 中定义一个容器row。

render() {
  return (

       <View style={styles.containertest}>
           <Image
                  source={Icon}
                  style={styles.inputIcon}
                  resizeMode="contain"
                />
     <Image
                  source={Icon}
                  style={styles.inputIcon}
                  resizeMode="contain"
                />

<Image
                  source={Icon}
                  style={styles.inputIcon}
                  resizeMode="contain"
                />
    </View>


  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  button: {
    backgroundColor: 'green',
    width: '40%',
    height: 40
  },
  inputIcon: {
    width: 35,
    height: 35,
    marginBottom: 5

  },
});

在里面Image你可以添加任何source你想在屏幕上显示的图像。
您可以根据需要进行进一步的更改。

希望能帮助到你 ！