Блог

Я новичок в разработке приложений, пытался сделать так, чтобы мое приложение выглядело так :

Но я сделал одну таблицу стилей для каждой иконки, она совсем не выглядит эффективной. есть ли лучший способ разместить осязаемые значки на нужных мне позициях?

вот мой код:

 import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View,SafeAreaView, Image, Button,TouchableOpacity} from 'react-native';

export default function App() {
  return (
    
    <SafeAreaView style={styles.container}>
      
      {/*blue part on top*/}
      <SafeAreaView style={styles.toppading}/>
      

      <Text style={styles.title}>I.A</Text>

      <TouchableOpacity style={styles.student_image}>
        < Image style={styles.student_image} source={require('./assets/student.png')}/>
      </TouchableOpacity>

      <TouchableOpacity style={styles.friends_image}>
        < Image style={styles.friends_image} source={require('./assets/friends.png')}/>
      </TouchableOpacity>

      <TouchableOpacity style={styles.message_image}>
        < Image style={styles.message_image} source={require('./assets/chat.png')}/>
      </TouchableOpacity>

      <TouchableOpacity style={styles.setting_image}>
        < Image style={styles.setting_image} source={require('./assets/settings.png')}/>
      </TouchableOpacity>

      {/*blue part on bottom*/}
      <SafeAreaView style={styles.downpading}/>

      <TouchableOpacity style={styles.map_image}>
        < Image style={styles.map_image} source={require('./assets/map.png')}/>
      </TouchableOpacity>

      <TouchableOpacity style={styles.event_image}>
        < Image style={styles.event_image} source={require('./assets/event.png')}/>
      </TouchableOpacity>

      <TouchableOpacity style={styles.home_image}>
        < Image style={styles.home_image} source={require('./assets/home.png')}/>
      </TouchableOpacity>

      <TouchableOpacity style={styles.help_image}>
        < Image style={styles.help_image} source={require('./assets/help.png')}/>
      </TouchableOpacity>

      <TouchableOpacity style={styles.question_image}>
        < Image style={styles.question_image} source={require('./assets/question.png')}/>
      </TouchableOpacity>
    </SafeAreaView>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  
  toppading: {
    height: 80,
    width: 400,
    backgroundColor: '#8CAFC0',
    position: 'absolute', 
    
  },

  downpading: {
    height: 80,
    width: 400,
    backgroundColor: '#8CAFC0',
    position: 'absolute', 
    bottom:0
    
  },
  title:{
    fontSize:24,
    fontWeight:'bold',
    textAlign:'center',
    top:30
  },
  student_image:{
    position:'absolute',
    width:40,
    height:40,
    top:13,
    left:"3%"
  },

  friends_image:{
    position:'absolute',
    width:40,
    height:40,
    top:13,
    left:'55%'

  },
  message_image:{
    position:'absolute',
    width:40,
    height:40,
    top:13,
    left:'65%'
  },

  setting_image:{
    position:'absolute',
    width:40,
    height:40,
    top:13,
    left:'75%'
  },

  map_image:{
    position:'absolute',
    width:40,
    height:40,
    bottom:10
  },

  event_image:{
    position:'absolute',
    width:40,
    height:40,
    bottom:10,
    left:'20%'
  },

  home_image:{
    position:'absolute',
    width:40,
    height:40,
    bottom:10,
    left:'40%'
  },

  help_image:{
    position:'absolute',
    width:40,
    height:40,
    bottom:10,
    left:'60%'
  },

  question_image:{
    position:'absolute',
    width:40,
    height:40,
    bottom:10,
    left:'80%'
  },

});
 

Также, поступая таким образом, осязаемое пятно находится не прямо на значке, каким-то образом выключено.

Я думаю , что лучший способ разместить ваши значки в соответствии с этим макетом-это использовать flexbox , как показано ниже:

 import React from "react";
import { StyleSheet, View } from "react-native";

function App() {
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <View style={styles.headerIconView}>
          <View style={styles.icon} />
        </View>

        <View style={styles.headerRowView}>
          <View style={styles.icon} />
          <View style={styles.icon} />
          <View style={styles.icon} />
          <View style={styles.icon} />
        </View>
      </View>

      <View style={styles.footer}>
        <View style={styles.icon} />
        <View style={styles.icon} />
        <View style={styles.icon} />
        <View style={styles.icon} />
        <View style={styles.icon} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "space-between"
  },
  header: {
    height: 80,
    width: "100%",
    backgroundColor: "#8CAFC0",
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center",
    paddingHorizontal: 10
    // position: 'absolute',
  },
  headerIconView: {
    flex: 1
  },
  headerRowView: {
    flexDirection: "row",
    flex: 2,
    justifyContent: "space-around"
  },
  footer: {
    height: 80,
    width: "100%",
    backgroundColor: "#8CAFC0",
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center",
    paddingHorizontal: 10
    // position: 'absolute',
    // bottom:0
  },
  icon: {
    width: 40,
    height: 40,
    backgroundColor: "gray"
  }
});

export default App;
 

Заметили, что вам даже не понадобится исправление position при использовании flexbox ?

Вот результат:

Если вам нужна помощь flexbox , вот песочница для кода, а также, возможно, вы захотите прочитать некоторые материалы из документов RN Flexbox.