如何在React Native中将列文本组件定位在屏幕中间

Question

我有三个垂直放置的文本组件，我试图使底部文本组件位于中间文本组件的正下方，同时将中间文本组件保持在屏幕的中心，但到目前为止我还没能做到。

这张图片显示了我到目前为止的进展，正如你所看到的，底部的文本部分(1234英镑(就在底部，而不是中间的部分(余额(的正下方。

这是我到目前为止的代码：

import * as React from 'react';
import { Text, View, StyleSheet, SafeAreaView } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
function BalanceScreen() {
return (
<View style={styles.container}>
<Text style={styles.accountNameHeading}>Account name:</Text>
<Text style={styles.balanceHeading}>Balance</Text>
<Text style={styles.balanceAmount}>£1,234</Text>
</View>
);
}
function AccountScreen() {
return (
<SafeAreaView
style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Account</Text>
</SafeAreaView>
);
}
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen name="Balance" component={BalanceScreen} />
<Tab.Screen name="Account" component={AccountScreen} />
</Tab.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<MyTabs />
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
paddingTop: 12,
backgroundColor: 'pink',
flexDirection: 'column',
},
accountNameHeading: {
flex: 1,
fontSize: 16,
fontWeight: '250',
color: 'red',
backgroundColor: 'white'
},
balanceHeading: {
flex: 1,
fontSize: 16,
fontWeight: '250',
color: 'red',
backgroundColor: 'white',
},
balanceAmount: {
fontSize: 36,
fontWeight: 'bold',
backgroundColor: 'white',
},
});

我曾尝试从文本组件中删除flex，而将alignSelf: 'center'和justifyContent: 'center'添加到中间的文本组件(Balance(中，但这并没有起到作用，我最终还是这样做了。

我添加了backgroundColor，使我更容易看到正在发生的事情。

Answer 1

我从balanceHeading中删除了flex: 1，并将flex: 1添加到balanceAmount中，它起了作用，因此：

balanceHeading: {
fontSize: 16,
fontWeight: '250',
color: 'red',
backgroundColor: 'white',
},
balanceAmount: {
flex: 1,
fontSize: 36,
fontWeight: 'bold',
backgroundColor: 'white',
},