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

【问题标题】：Place 3 Image icons in a row in React Native在 React Native 中连续放置 3 个图像图标
【发布时间】：2019-08-11 01:00:42
【问题描述】：

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

【问题讨论】：

标签： facebook-login social google-signin twitter-login

【解决方案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。
您可以根据需要进行进一步的更改。

希望对您有所帮助！

【讨论】：

【解决方案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';

【讨论】：

当我运行你的代码 SyntaxError 时它给出了以下错误：相邻的 JSX 元素必须被包裹在一个封闭的标签中。你想要一个 JSX 片段 ...> 吗？ (50:6) 48 | 查看> 49 | > 50 | | ^ 51 | 52 | { }}> 53 |
@AathmikaMurukiah 我编辑了我忘记关闭TouchableOpacity标签的帖子