React Native中Pressable组件内文本居中失效问题求助

问题出在你给pressableStyle设置的alignContent: 'center'——这个属性只在多行flex容器中生效，而你的Pressable是单行布局，应该用alignItems: 'center'来实现水平居中。另外给Text添加textAlign: 'center'可以双重保险，避免容器宽度变化时文本偏移。

修改后的样式代码： #

const styles = StyleSheet.create({
  titleStyle: {
    color: 'white',
    fontSize: 30,
    textAlign: 'center' // 新增：让文本自身居中
  },
  pressableStyle: {
    alignItems: 'center', // 替换alignContent为alignItems
    justifyContent: 'center',
    height: 100,
    borderRadius: 10
  },
})

完整修改后的组件代码： #

import React from 'react';
import { StyleSheet, Pressable, GestureResponderEvent, PressableProps, Text } from 'react-native';

interface MyButtonProps extends PressableProps {
  key: number;
  uri: string;
  title: string;
}

export default class MyButton extends React.Component<MyButtonProps, {}> {
  _onPressButton = (uri: string) => {
    fetch(uri).then((res) => {
      console.log(res);
    }).catch((e) => console.log(e));
  };

  render() {
    const { onPress, ...rest } = this.props;
    return (
      <Pressable style={({ pressed }) => [
        {
          backgroundColor: pressed ? '#3F8f7F' : '#318ce7',
        }, styles.pressableStyle]}
        onPress={(event: GestureResponderEvent) => {
          this._onPressButton(this.props.uri);
          if (onPress !== undefined && onPress !== null) {
            onPress(event);
          }

        }}
        {...rest}
      >
        <Text style={styles.titleStyle}>{this.props.title}</Text>
      </Pressable>
    );
  }
}

const styles = StyleSheet.create({
  titleStyle: {
    color: 'white',
    fontSize: 30,
    textAlign: 'center'
  },
  pressableStyle: {
    alignItems: 'center',
    justifyContent: 'center',
    height: 100,
    borderRadius: 10
  },
})

原理说明： #

1. justifyContent: 'center'：负责垂直方向的居中（因为React Native容器默认flexDirection: column）
2. alignItems: 'center'：负责水平方向的居中，单行flex容器必须用这个属性，而非alignContent
3. textAlign: 'center'：确保Text组件内部的文本在自身宽度范围内居中，即使Pressable的宽度被内容撑开，文本也能保持居中

内容的提问来源于stack exchange，提问作者Papp Zoltán