Question

我创建了具有TouchableOpacity和LinearGradient的按钮，其中的图标内部带有文本，我想将图标设置为位于按钮的开始位置附近，并且文本位于中心位置。我尝试为icon设置margin属性，但是文本也随icon移动。有人可以帮我解决这个问题吗？

const Button = ({ title, btnStyle, onPress, linearGradient, iconName }) =>
{
    return (
        <TouchableOpacity
            style={styles.btn}
            onPress={onPress}
        >
            <LinearGradient
                start={{ x: 0, y: 0 }}
                end={{ x: 1, y: 0 }}
                colors={["#00c6ff", "#0072ff"]}
                style={[styles.imageView, btnStyle]}>
                <FontAwesome5 name="facebook-f" style={{ fontSize: 35 }} color="#ffffff" />
                <Text style={styles.buttonText}>{title}</Text>
            </LinearGradient>
        </TouchableOpacity>
    );
};

const styles = StyleSheet.create(
{
    buttonText:
    {
        fontSize: 18,
        textAlign: "center",
        margin: 10,
        color: "#ffffff",
        backgroundColor: "transparent",
        padding: 5
    },
    linearGradient:
    {
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        borderRadius: 5,
        marginBottom: "15%",
        height: 60
    },
    btn:
    {
        borderRadius: 5,
        height: 60,
        marginVertical: 10,
        marginHorizontal: 15,
        paddingVertical: 50
    }
});

Answer 1

尝试一下：

 const Button = ({ title, btnStyle, onPress, linearGradient, iconName }) =>
    {
        return (
            <TouchableOpacity
                style={styles.btn}
                onPress={onPress}
            >
                <LinearGradient
                    start={{ x: 0, y: 0 }}
                    end={{ x: 1, y: 0 }}
                    colors={["#00c6ff", "#0072ff"]}
                    style={[styles.imageView, linearGradient]}>
                    <FontAwesome5 name="facebook-f" style={{ fontSize: 35, flex: 0.10,textAlign:'right',  }} color="#ffffff" />
                    <Text style={styles.buttonText}>{title}</Text>
                </LinearGradient>
            </TouchableOpacity>
        );
    };

    const styles = StyleSheet.create(
    {
        buttonText:
        {
             flex: 0.9,
             justifyContent: "center",
             alignItems: "center",
             fontSize: 18,
             textAlign: "center",
             color: "#ffffff",
             backgroundColor: "transparent",

        },
        linearGradient:
        {
             flex: 1,
             flexDirection: "row",
             justifyContent: "flex-start",
             alignItems: "center",
             borderRadius: 5,
             height: 60,
        },
        btn:
        {
            flex:1,
            borderRadius: 5,
        }
    });

反应本机按钮图标位置问题

1 个答案: