如何居中对齐React Native Paper中TextInput组件的标签？

你之前的代码没生效，是因为React Native Paper的TextInput标签容器默认是左对齐布局，仅给内部Text设置textAlign: 'center'无法让标签整体居中。以下是几种可行的解决方法：

方法1：纯文本标签直接用labelStyle #

如果标签是普通文本，直接通过labelStyle设置对齐样式即可：

import { TextInput } from 'react-native-paper';
import { StyleSheet } from 'react-native';

<TextInput
  label="你的标签内容"
  labelStyle={styles.label}
/>

const styles = StyleSheet.create({
  label: {
    textAlign: 'center',
    width: '100%',
  },
});

方法2：自定义label组件时调整对齐 #

如果必须用自定义Text组件作为label，需要让Text组件在标签容器中居中，同时占满容器宽度：

import { TextInput } from 'react-native-paper';
import { Text, StyleSheet } from 'react-native';

<TextInput
  label={<Text style={styles.label}>自定义标签</Text>}
/>

const styles = StyleSheet.create({
  label: {
    textAlign: 'center',
    alignSelf: 'center',
    width: '100%',
  },
});

方法3：全局主题统一设置 #

如果需要所有TextInput的标签都居中，可以通过修改React Native Paper的主题实现全局配置：

import { Provider as PaperProvider, DefaultTheme } from 'react-native-paper';

const customTheme = {
  ...DefaultTheme,
  components: {
    TextInput: {
      styles: {
        label: {
          textAlign: 'center',
          alignSelf: 'center',
          width: '100%',
        },
      },
    },
  },
};

// 在根组件中包裹应用
<PaperProvider theme={customTheme}>
  {/* 你的应用内容 */}
</PaperProvider>

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