我想在可按元素中居中对齐文本，但不起作用。

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,

  },
  pressableStyle: {
    alignContent: 'center',
    justifyContent: 'center',
    height: 100,
    borderRadius: 10
  },
})

文本是左对齐而不是居中。我怎样才能正确地对齐内容？请帮助我。（我输入更多的这篇文章接受不作为一个代码，只是我不明白为什么）