如何使用本机反应在应用程序上放置可触摸图标

Question

我是应用程序开发的新手，试图让我的应用程序看起来像这样：

但是我为每个图标制作了一个样式表，它看起来一点也不高效。有没有更好的方法可以将可触摸的图标放在我想要的位置？

这是我的代码：

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%'
  },

});

同样通过这种方式，可触摸点不在图标上，不知何故关闭。

Answer 1

我认为按照这种布局处理图标的最佳方法是使用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;

注意到在使用flexbox 时您甚至不需要固定的position？

结果如下：

如果您需要有关flexbox 的帮助，这里是代码的SandBox，此外，您可能还想阅读RN Flexbox Docs 的一些材料。