在图像旁边居中放置文本

Question

我有一个名为“工具”的屏幕，它允许我将用户重定向到多个子屏幕。我想在图像中间对齐文本。我必须这样做：

但我的印象是它没有完全对齐中心，造成了偏移，不知道你能不能看到。

在这一点上你能帮我一下吗，我该如何改进？

代码：

export default function Tools({navigation}) {

  return (
    <ScrollView>
    <View style={styles.screen}>
      <View style={styles.row}>
        <Text style={{marginHorizontal: 25, fontSize: 16}}>{i18n.t("tools.action.account")}</Text>
        <TouchableOpacity
          onPress={() => navigation.navigate('Account')}
          style={styles.roundButton}>
          <Image source={require("../../assets/images/accounting.png")} style={styles.img}/>
        </TouchableOpacity>
      </View>
      <View style={styles.row}>
        <TouchableOpacity
          onPress={() => navigation.navigate('Scan')}
          style={styles.roundButton}>
          <Image source={require("../../assets/images/barcode.png")} style={styles.img}/>
        </TouchableOpacity>
        <Text style={{marginHorizontal: 25, fontSize: 16}}>{i18n.t("tools.action.scanProducts")}</Text>
      </View>
      <View style={styles.row}>
        <Text style={{marginHorizontal: 25, fontSize: 16}}>{i18n.t("tools.action.ticket")}</Text>
        <TouchableOpacity
          onPress={() => navigation.navigate('Tickets')}
          style={styles.roundButton}>
          <Image source={require("../../assets/images/ticket.png")} style={styles.img}/>
        </TouchableOpacity>
      </View>
      <View style={styles.row}>
        <TouchableOpacity
          onPress={() => navigation.navigate('Checkout')}
          style={styles.roundButton}>
          <Image source={require("../../assets/images/cash-register.png")}
                 style={styles.img}/>
        </TouchableOpacity>
        <Text style={{marginHorizontal: 25, fontSize: 16}}>{i18n.t("tools.action.cash")}</Text>
      </View>
            <View style={styles.row}>
        <Text style={{marginHorizontal: 25, fontSize: 16}}>{i18n.t("tools.action.products")}</Text>
        <TouchableOpacity
          onPress={() => navigation.navigate('Products')}
          style={styles.roundButton}>
          <Image source={require("../../assets/images/products.png")} style={styles.img}/>
        </TouchableOpacity>
      </View>
    </View>
   </ScrollView>
  );
}

风格：

 screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
row: {
   flexDirection: 'row',
   alignItems: 'center',
   justifyContent:'center',
   width : '100%',
 },
roundButton: {
    marginTop: 20,
    width: 100,
    height: 100,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
    borderRadius: 100,
    backgroundColor: 'orange',
  },
  img: {
    width: 50,
    height: 50,
  },

Answer 1

从 roundButton 中删除 marginTop:

 roundButton: {
    width: 100,
    height: 100,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
    borderRadius: 100,
    backgroundColor: 'orange',
  },

工作示例：Expo Snack

我添加粉红色背景只是为了突出显示行并显示文本居中，稍后将其删除:)

完整源代码：


export default function Tools({ navigation }) {
  return (
    <ScrollView>
      <View style={styles.screen}>
        <View style={styles.row}>
          <Text style={{ marginHorizontal: 25, fontSize: 16 }}>
            {('tools.action.account')}
          </Text>
          <TouchableOpacity
            onPress={() => navigation.navigate('Account')}
            style={styles.roundButton}>
            <Image
              source={{uri: "https://i.stack.imgur.com/t8vJf.jpg?s=328&g=1"}}
              style={styles.img}
            />
          </TouchableOpacity>
        </View>
        <View style={styles.row}>
          <TouchableOpacity
            onPress={() => navigation.navigate('Scan')}
            style={styles.roundButton}>
            <Image
              source={{uri: "https://i.stack.imgur.com/t8vJf.jpg?s=328&g=1"}}
              style={styles.img}
            />
          </TouchableOpacity>
          <Text style={{ marginHorizontal: 25, fontSize: 16 }}>
            {('tools.action.scanProducts')}
          </Text>
        </View>
        <View style={styles.row}>
          <Text style={{ marginHorizontal: 25, fontSize: 16 }}>
            {('tools.action.ticket')}
          </Text>
          <TouchableOpacity
            style={styles.roundButton}>
            <Image
              source={{uri: "https://i.stack.imgur.com/t8vJf.jpg?s=328&g=1"}}
              style={styles.img}
            />
          </TouchableOpacity>
        </View>
        <View style={styles.row}>
          <TouchableOpacity
            style={styles.roundButton}>
            <Image
              source={{uri: "https://i.stack.imgur.com/t8vJf.jpg?s=328&g=1"}}
              style={styles.img}
            />
          </TouchableOpacity>
          <Text style={{ marginHorizontal: 25, fontSize: 16 }}>
            {('tools.action.cash')}
          </Text>
        </View>
        <View style={styles.row}>
          <Text style={{ marginHorizontal: 25, fontSize: 16 }}>
            {('tools.action.products')}
          </Text>
          <TouchableOpacity
            style={styles.roundButton}>
            <Image
              source={{uri: "https://i.stack.imgur.com/t8vJf.jpg?s=328&g=1"}}
              style={styles.img}
            />
          </TouchableOpacity>
        </View>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    width: '100%',
    backgroundColor: "pink",
    margin: 5
  },

  roundButton: {
    width: 100,
    height: 100,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
    borderRadius: 100,
    backgroundColor: 'orange',
  },
  img: {
    width: 50,
    height: 50,
  },
});

在图像旁边居中放置文本

center a text next to an image

javascript

css

center

react-native