react-native-paper Button组件嵌套View在Android显示为空的解决办法咨询

react-native-paper的Button组件在原生平台（Android/iOS）有内容限制，默认仅支持文本或指定的图标组件作为子元素，直接嵌套View会被组件内部逻辑忽略，而Web端因DOM渲染机制的灵活性可以正常显示布局。

以下是可行的解决方法：

• 改用TouchableRipple组件自定义按钮
  TouchableRipple是react-native-paper提供的基础可触摸容器，支持任意子元素嵌套，完全适配flex布局需求，同时保留Material Design的触摸波纹效果：

  import { View, Text } from 'react-native';
  import { TouchableRipple } from 'react-native-paper';
  
  // 自定义布局的按钮
  <TouchableRipple 
    onPress={() => {/* 你的点击逻辑 */}}
    style={{ 
      paddingVertical: 12, 
      paddingHorizontal: 24, 
      borderRadius: 4,
      backgroundColor: '#6200ee' // 可自定义按钮背景色
    }}
  >
    <View style={{ flexDirection: 'column', alignItems: 'center' }}>
      <Text style={{ color: '#fff' }}>One</Text>
      <Text style={{ color: '#fff', marginTop: 4 }}>Two</Text>
    </View>
  </TouchableRipple>
  

• 若坚持使用Button组件
  可以将多文本内容整合到单个Text组件内，通过换行符或Text嵌套实现多行效果（原生平台支持Text内嵌套Text）：

  import { Text } from 'react-native';
  import { Button } from 'react-native-paper';
  
  <Button onPress={() => {/* 点击逻辑 */}}>
    <Text>
      One{'\n'}
      <Text style={{ marginTop: 4 }}>Two</Text>
    </Text>
  </Button>
  

  这种方式仅适用于文本类布局，若需要更复杂的flex布局（比如图文混排、多列布局），还是推荐使用TouchableRipple。

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