反应本机按钮。左边是Logo，剩下的是文字

Question

const Button = ({  onPress, children, fontColor='black', backgroundColor='white', fontSize, url,borderRadius=7, style}) => {
    const styles = StyleSheet.create({
        container: {
          flexDirection: 'row',
          backgroundColor: backgroundColor,
          paddingVertical: 10,
          paddingHorizontal: 10,
          borderRadius: borderRadius,
          justifyContent: url ? 'flex-start' : 'center',
          alignItems:'center',
        },
        image:{
            borderWidth:2,
            borderColor:"#000",

            height:"100%",
            width:"100%",
            flex:1,
        },
        text: {
          borderWidth:2,
          borderColor:"#0000ff",

          color: fontColor,
          fontSize: fontSize,
          marginLeft: url ? 10 : 0,
          textAlign:"center"
        },
      });

  return (
    <TouchableOpacity style={[styles.container, style]} onPress={onPress}>
      {url && <Image source={url} resizeMode="contain" style={styles.image}/>}
      <Text style={styles.text} adjustsFontSizeToFit={true}>{children}</Text>
    </TouchableOpacity>
  );
};

你好，

如上图所示，我在按钮上有一个徽标和文字。我希望徽标适合按钮，因为它已经是图像上的情况（尺寸）。我会把它放在左边，这样它所占的位置就尽可能少。正如您在图片中看到的那样，情况并非如此，它占用了空白空间，从而减少了文本的空间。由于图像的框不适合新比例的图片，“短信”完全推向右侧。

我们可以看到这不是图像本身造成的。

提前非常感谢您的帮助

Answer 1

我对您的代码进行了一些修改，使其可以在我的系统上运行。

通过了解您的要求，我认为您期待这样的东西。

要实现此目的，您必须将

Image

包装在

View

中，并为其定义

width

和

height

，而不是给它

100%

。 另外，请确保在父换行中添加

justifyContent

设置为

space-between

。

import {
  Text,
  SafeAreaView,
  StyleSheet,
  TouchableOpacity,
  Image,
  View,
} from 'react-native';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <TouchableOpacity style={styles.container}>
        <View style={styles.imageContainer}> // Add this container for image
          <Image
            src={'https://reactnative.dev/img/tiny_logo.png'}
            resizeMode="contain"
            style={styles.image}
          />
        </View>
        <Text style={styles.text}>Test</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    backgroundColor: 'red',
    paddingVertical: 10,
    paddingHorizontal: 10,
    borderRadius: 20,
    alignItems: 'center',
    justifyContent: 'space-between', // add this prop
  },
  image: {
    height: 100,
    width: 100,
    flex: 1,
    backgroundColor: 'green',
  },
  text: {
    borderWidth: 2,
    borderColor: '#0000ff',
    fontSize: 12,
    textAlign: 'center',
    width: '50%',
  },
  imageContainer: { 
    width: 100,
    height: 100,
    borderWidth: 2,
    borderColor: '#000',
  },
});

检查零食这里。