如何将Cancel/Ok文本置于Avatar按钮下方且整体可点击？

没问题！你现在的问题主要是布局方向没搞对，而且没有把Avatar和文本统一成一个可点击的整体。我来帮你调整代码：

核心改动点： #

• 给每个「Avatar+文本」的组合套一个TouchableOpacity容器，这样点击容器内的任何区域（不管是Avatar还是文本）都会触发同一个点击事件
• 给这个容器设置flexDirection: "column"，让Avatar和文本纵向排列，再加上alignItems: "center"让内容居中
• 外层的View保持flexDirection: "row"，用来横向排列两个按钮组，这样整体布局就对了

修改后的完整代码： #

import { View, Text, TouchableOpacity } from 'react-native';
import Avatar from 'react-native-elements/Avatar'; // 假设你用的是react-native-elements的Avatar组件

const OrderInformationScreen = props => {
  return (
    <View style={{
      backgroundColor: '#00BFFF',
      alignItems: 'flex-start',
      justifyContent: 'center',
      marginTop: 30,
      borderBottomWidth: 2,
      borderColor: 'blue',
      flexDirection: "row",
      justifyContent: 'space-evenly',
      paddingBottom: 20 // 增加底部内边距，避免文本贴到底部边框
    }}>
      {/* 第一个按钮组：cancel */}
      <TouchableOpacity 
        onPress={() => console.log("cancel!")}
        style={{ alignItems: 'center', marginTop: 30 }} // 把原来Avatar的marginTop移到这里
      >
        <Avatar 
          size='large' 
          activeOpacity={0.2} 
          rounded 
          source={require('../assets/down.png')} 
          style={{ height: 80, width: 80 }} 
        />
        <Text style={{ fontSize: 30, marginTop: 10 }}>cancel</Text>
      </TouchableOpacity>

      {/* 第二个按钮组：ok */}
      <TouchableOpacity 
        onPress={() => console.log("Works!")}
        style={{ alignItems: 'center', marginTop: 30 }}
      >
        <Avatar 
          size='large' 
          activeOpacity={0.2} 
          rounded 
          source={require('../assets/up.png')} 
          style={{ height: 80, width: 80 }} 
        />
        <Text style={{ fontSize: 30, marginTop: 10 }}>ok</Text>
      </TouchableOpacity>
    </View>
  );
};

额外说明： #

• 我把原来Avatar的marginTop移到了TouchableOpacity上，这样整个按钮组都会下移，布局更统一
• 给文本加了marginTop:10，让它和Avatar之间有一点间距，看起来更舒服
• 外层View加了paddingBottom，避免文本贴到底部的边框上

这样调整后，每个按钮组的Avatar和文本都会纵向排列，并且点击任何一个部分都会触发对应的点击事件啦！

内容的提问来源于stack exchange，提问作者user12851799