Поместите 3 изображения в ряд в React Native

Question

Для входа в социальные сети я хочу разместить иконки социальных сетей, как показано на следующем рисунке. Как это сделать введите описание изображения здесь

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