为什么我的文本没有显示在中心

Question

我开始使用 react-native，我在居中文本时遇到了问题，这是一个非常简单的代码，但 idk 为什么它不起作用

我也在玩动画，我做的所有例子都没有工作

所以我有一个带有文本和样式的视图，带有弹性应该足够了，但还不是

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class HomeView extends Component {
      render(){  
        return(
          <View style={styles.container}>
            <Text style={styles.welcome}>Hello World</Text>
          </View>     
        );
      }
}
const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#F5FCFF',
      alignItems: 'center',
      justifyContent: 'center',
    },
     welcome: {
       fontSize: 20,
       textAlign: 'center',
       margin: 10
     }
});

这是应用类

import React from 'react';
import { StyleSheet,View} from 'react-native';
import HomeView from './components/HomeView';
const App = () => {
  return (
    <View>
      <HomeView/>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});
export default App;

还有指数.js

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);

Answer 1

在 render(( 之后，你不会用 } 关闭你的类。

Answer 2

在 App 类中，您需要使用容器样式呈现视图所以它会是

const App = () => {
  return (
    <View style={styles.container}>
      <HomeView/>
    </View>
  );
};

所以它有flex: 1，然后可以占据整个空间并正确对齐。