Css React native make按钮固定到文本

我对React Native很陌生，现在我正在开发我的第一个应用程序。该应用程序的想法是，当你按下按钮时，一个随机文本将显示upp（取自my data.json）。我想我的按钮是在一个固定的位置，即使我的文字是不同的长度（因此不同的高度）。我希望它从屏幕底部向上移动25-33%，就像我写的那样，即使文本在移动，也要保持在原来的位置。我该怎么做？：）

下面是我的代码“Training.js”：

从“React”导入React
从“react”导入{useState}
从“react native”导入{视图，振动}
从“样式化组件/本机”导入样式化
const TouchButton=styled.TouchableOpacity`
自我：中心；
项目：中心；
论证内容：中心；
填充：10px；
marginBottom:0px；
宽度：160px；
边界半径：15px；
背景颜色：#ff8300；
边界：2px#ff8300；
`
const ButtonText=已设置样式的.Text`
text对齐：居中；
字体大小：20px；
字体：粗体；
证明内容：中心；
项目：中心；
颜色：#ffad57；
`
const Title=styled.Text`
宽度：300px；
字体大小：45像素；
利润率：25px；
marginBottom:100px；
颜色：#ff8300；
字体：粗体；
text对齐：居中；
论证内容：中心；
项目：中心；
`
导出常量训练=（{activitiesArray}）=>{
const[activity，setActivity]=useState（“”）
常量getActivity=（）=>{
const theActivity=activitiesArray[Math.floor（Math.random（）*activitiesArray.length）]
设置活动（activity.activity）
}
返回(
{活动}
{
getActivity（）；
振动。振动（）；}}>
你是说什么？
)
};

下面是“App.js”：

从“React”导入React
从“./data.json”导入数据
从“样式化组件/本机”导入样式化
从“./components/Training”导入{Training}
常量应用=（）=>{
返回(
)
}
const Container=styled.View`
弹性：1；
背景颜色：#ffad57；
论证内容：中心；
项目：中心；
`
导出默认应用程序

如果我理解正确，您必须将触摸按钮样式更改为

justifyContent:center；对齐项目：柔性端；marginBottome:30你好，阿米尔！感谢您的帮助：）当我根据您的评论更改样式时，唯一发生的事情是按钮文本向右移动（柔性端），但按钮本身仍然会根据按钮上方文本的文本长度左右跳动。
import React from 'react'
import { useState } from 'react'
import { View, Vibration } from 'react-native'
import styled from 'styled-components/native'

const TouchButton = styled.TouchableOpacity`
  alignSelf: center;
  alignItems: center;
  justifyContent: center;
  padding: 10px;
  marginBottom: 0px;
  width: 160px;
  borderRadius: 15px;
  backgroundColor: #ff8300;
  border: 2px #ff8300;
`
const ButtonText = styled.Text`
  textAlign: center;
  fontSize: 20px;
  fontWeight: bold;
  justify-content: center;
  alignItems: center;
  color: #ffad57;
`
const Title = styled.Text`
  width: 300px;
  fontSize: 45px;
  margin: 25px;
  marginBottom: 100px;
  color: #ff8300;
  fontWeight: bold;
  textAlign: center;
  justifyContent: center;
  alignItems: center;
`
export const Training = ({activitiesArray}) => {

  const [activity, setActivity] = useState("")

  const getActivity = () => {
    const theActivity = activitiesArray[Math.floor(Math.random() * activitiesArray.length)]
    setActivity(theActivity.activity)
  }

  return (
    <View>
      <Title>
        {activity}
      </Title>
      <TouchButton onPress={() => {
      getActivity(); 
      Vibration.vibrate();}}>
        <ButtonText>Vad ska jag träna idag?</ButtonText>
      </TouchButton>
    </View>
  )
};

import React from 'react'
import data from './data.json'
import styled from 'styled-components/native'
import { Training } from './components/Training'

const App = () => {
  
  return (
    <Container>
      <Training activitiesArray={data.training}/>
    </Container>
  )
  }

  const Container = styled.View`
  flex: 1;
  backgroundColor: #ffad57;
  justifyContent: center;
  alignItems: center;
`

export default App