Javascript 有没有办法把文字写出来；取消“；及；“好的”；在头像按钮下面？我的意思是，头像和文字需要按下时，点击

有没有办法将文本“取消”和“确定”放在化身按钮下方？我的意思是，头像和文字需要按下时，点击。 我不能把下面的文字放在每个按钮上，我不明白我的错误是什么

但我需要下面的文字，以每个按钮，也必须按下相同的图像（它应该是按钮的一部分）

这是我的代码示例：

const OrderInformationScreen = props => {
    return (
        <View
            style={{
                backgroundColor: '#00BFFF',
                alignItems: 'flex-start',
                justifyContent: 'center',
                marginTop: 30,
                borderBottomWidth: 2,
                borderColor: 'blue',
                flexDirection: "row",
                justifyContent: 'space-evenly'

            }}
        >
            <Avatar
                size='large'
                containerStyle={{ marginTop: 30 }}
                activeOpacity={0.2}
                rounded
                source={require('../assets/down.png')} style={{ height: 80, width: 80 }}
                onPress={() => console.log("cancel!")}
            />
            <View >
                <Text style={{ fontSize: 30 }}>cancel</Text>
            </View>
            <Avatar
                size='large'
                activeOpacity={0.2}
                rounded
                source={require('../assets/up.png')} style={{ height: 80, width: 80 }}
                onPress={() => console.log("Works!")}
            />
            <View>
                <Text style={{ fontSize: 30 }}>ok</Text>
            </View>
        </View>
    );
};

const OrderInformationScreen=props=>{
返回(
console.log（“取消！”）}
/>
取消
console.log（“Works！”）}
/>
好啊
);
};

我认为最好的选择是用TouchableOpacity包装头像和文本

<TouchableOpacity onPress={() => console.log("cancel!")}>
        <Avatar
            size='large'
            containerStyle={{ marginTop: 30 }}
            activeOpacity={0.2}
            rounded
            source={require('../assets/down.png')} style={{ height: 80, width: 80 }}
        />
        <View >
            <Text style={{ fontSize: 30 }}>cancel</Text>
        </View>
</TouchableOpacity>

console.log（“取消！”）}>
取消

---

我建议使用基本的本地元素编写自己的样式。尽量使用最少数量的第三方插件。祝你好运。

最好的选择是用TouchableOpacity包装头像和文本。并添加更多样式，如下所示

<TouchableOpacity style={{
                backgroundColor: '#00BFFF',
                display : "flex",
                alignItems: 'flex-start',
                justifyContent: 'center',
                marginTop: 30,
                borderBottomWidth: 2,
                borderColor: 'blue',

            }} onPress={() => {}>
        <Avatar
            size='large'
            containerStyle={{ marginTop: 30 }}
            activeOpacity={0.2}
            rounded
            source={require('../assets/down.png')} style={{ height: 80, width: 80 }}
        />
        <View >
            <Text style={{ fontSize: 30 }}>cancel || ok</Text>
        </View>
</TouchableOpacity>

{}>
取消| |好的

之所以如此，是因为您提供了查看的样式。您已经给出了一个“弯曲方向”行，该行将所有元素放置在一行中。您已经在根视图中给出了四个元素，其中包含style flex direction行，因此该视图中的所有四个元素（2个化身组件和2个文本）将并排放置在一行中。 如果您想在图像i thin下方显示文本，则应将化身和文本框放在一个视图中，并为该视图设置一个弯曲方向列，如：

<View style={{flexDirection: 'row', justifyContent: 'space-evenly'}}>
    <TouchableOpacity onPress={() => console.log("cancel!")>
        <View style={{flexDirection: 'column', justifyContent: 'space-evenly'}}>
            <Avatar>
            <View>
                <Text />
            </View>
        <View>
    </TouchableOpacity>

    <TouchableOpacity onPress={() => console.log("works!")>
        <View style={{flexDirection: 'column', justifyContent: 'space-evenly'}}>
            <Avatar>
            <View>
                <Text />
            </View>
        <View>
    </TouchableOpacity>
<View>

console.log（“取消！”）>
console.log（“工作！”）>

希望这能有所帮助：）