reactjs - 如何在 React Native 中删除 Touchable Opacity 组件之间的空格

Question

问题:

我创建了一个带有三个可触摸不透明组件的 React Native 组件。显示是这样的。

这就是我的代码的样子。

/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import LangaugeCard from './LanguageCard';
import styles from '_styles/homescreen';

class Localization extends Component {
  render() {
    return (
      <View style={styles.localization_container}>
        <TouchableOpacity>
          <LangaugeCard language="Hindi" />
        </TouchableOpacity>
        <TouchableOpacity>
          <LangaugeCard language="English"  />
        </TouchableOpacity>
        <TouchableOpacity>
          <LangaugeCard language="French" />
        </TouchableOpacity>
      </View>
    );
  }
}

export default Localization;

我的 LanguageCard 看起来像这样。

/* eslint-disable prettier/prettier */
import React from 'react';
import {View, Text} from 'react-native';
import styles from '_styles/homescreen';

const LanguageCard = (props) => {
  const {language, instruction} = props;
  return (
    <View style={styles.langauge_card}>
      <View style={styles.langauge_view}>
        <Text style={styles.language}>{language}</Text>
      </View>
      <View style={styles.instruction_view}>
        <Text style={styles.instruction}>{instruction}</Text>
      </View>
    </View>
  );
};

export default LanguageCard;

这是我的样式文件。

/* eslint-disable prettier/prettier */
import {StyleSheet} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    flex: 1,
    backgroundColor: '#eeeeee',
    height: '100%',
    justifyContent: 'center',
  },
  localization_container: {
    flex: 1,
  },
  langauge_card: {
    backgroundColor: '#ffffff',
    height: '46%',
    marginLeft: '5%',
    marginRight: '5%',
    borderRadius:35,
    flexDirection:'row',
    elevation: 1,
  },
  langauge_view:{
    backgroundColor:'#007aff',
    marginTop: '8%',
    marginBottom: '8%',
    marginLeft:'8%',
    borderRadius: 15,
    width:'30%',
    justifyContent: 'center',
  },
  language:{
    fontFamily:'IskoolaPota',
    fontSize:24,
    textAlign:'center',
    color:'#ffffff',
    justifyContent:'center',
  },
  instruction_view:{
    marginTop: '8%',
    marginBottom: '8%',
    marginLeft:'5%',
    justifyContent: 'center',
  },
  instruction:{
    color:'#444444',
    fontSize: 15,
  },
});

export default styles;

我想做的是减少可触摸组件之间的空间，并将所有三个按钮放在屏幕中央我尝试了很多方法来找到这样做的方法，但无法这样做。有人可以通过修改代码来帮助我实现这一目标吗？谢谢

Answer 1

在这种情况下，我认为使用百分比作为高度不是一个好主意。现在，您的 TouchableOpacity 正在离开屏幕，因为您有 height: '46%', 因为您有其中的 3 个，所以它的高度是 138% + 填充和边距。

我更喜欢使用 flex 并使用 justifyContent 进行水平对齐，使用 align-items 进行垂直对齐

所以在你的情况下，

langauge_card:{
 flex: 1,
}
langauge_view:{
 flex: 1,
 alignItems: "center",
 justifyContent: "center"
}
instruction_view:{
 flex: 1,
 alignItems: "center",
 justifyContent: "center"
}

您可以尝试使用 flex、margin 和“flex-start”、“center”、“flex-end”来对齐内容和 alignItem。

希望这对您有所帮助。