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

Question

对于社交媒体登录，我想放置社交媒体图标，如下图所示。如何获得enter image description here

Answer 1

您必须使用flexDirection设置为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。 您可以根据需要进行进一步的更改。 希望能帮助到你 ！

Answer 2

试试这个：

<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';