将页面导入 App.js 时显示为空白

Question

我对 React Native 还很陌生，在将其导入 App.js 时，我正在努力让这个页面显示出来。它自己工作，但是一旦我尝试清理并将代码放入它自己的文件中并调用它，事情就变糟了。

把事情分解；

• Welcome.js 包含我正在尝试创建的“欢迎页面”的代码
• App.js 是创建的默认文件，基本上只是调用 Welcome
• 而 GetStartedButton 只是导入 Welcome 的按钮的代码，但我认为没有必要提供。

运行 App.js 时我没有收到任何错误，我的屏幕只是白色的！

感谢您的帮助，我感激不尽。我为我的无知道歉！ 如果只是另一个错字，我不会感到惊讶。

我确信我的代码很糟糕！假设我的风格是一种有趣的做事方式！学习...

Welcome.js

import React, { Component } from 'react';
import { StyleSheet, Text, View, Button} from 'react-native';
import GetStarted from './src/components/GetStartedButton';


export default class Welcome extends Component {
    render() {
    return (
        <View style={styles.containerMain}>
        <View style={styles.containerClub}>
        <Text style={styles.title}>Word</Text>
        </View>
        
      <View style={styles.containerCaption}>   
        <Text style={styles.caption}> Words Words Words  </Text> 
      </View>
          
      <View style={styles.containerBottom}>   
      <GetStarted text='Get Started' color='#E50061' /> 
      </View>
      
     
    
    </View>

    );
    }
}

const styles = StyleSheet.create({
    containerMain: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'black',
    },

containerClub: {
    position: 'absolute',
    bottom: 288
  },

  containerCaption: {
    position: 'absolute',
    bottom: 250

  },
  /* To style the button and positioning*/
  containerBottom: {
    
    position: 'absolute',
    bottom: 100
  },
  /* To style "Word"*/
  title: {
    
    fontSize: 35,
    fontWeight: "bold",

  },
  /* To style "Words Words Words"*/
  caption:
  {
   
    fontSize: 16
  }
}
)

App.js

import React, { Component } from 'react';
import { StyleSheet, Text, View, Button} from 'react-native';
import Welcome from './src/pages/Welcome';


export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
       <Welcome/>
      </View>
    
   
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
   
  }
}
);

GetStartedButton.js

import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity  } from 'react-native';

const GetStarted = props => {
    const content = (
        <View style={[styles.button, {backgroundColor: props.color}]}>
            <Text style={styles.text}>{props.text}</Text>
        </View>
    )
    return <TouchableOpacity onPress={props.onPress}>{content}</TouchableOpacity>
}

const styles = StyleSheet.create({
    button: {
        padding: 20,
        width: 340,
        borderRadius: 8,
        alignItems: 'center',
    },
    text: {
        color: 'white',
        fontSize: 20,
        justifyContent: 'center',
    alignItems: 'center',
    }
});

export default GetStarted;

Answer 1

问题在于您的 Welcome 组件样式。你把你的文字涂成白色，所以……它全是白色的。

const styles = StyleSheet.create({

  // (...)

  /* To style "word"*/
  title: {
    color: 'white', // remove it!
    fontSize: 35,
    fontWeight: "bold",

  },
  /* To style "words words words"*/
  caption:
  {
    color: 'white', // remove it!
    fontSize: 16
  }

@编辑 此外，您没有在 App 组件中应用您的样式。它应该是这样的：

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
       <Welcome/>
      </View>
    )
  }
}

Answer 2

尝试将backgroundColor 更改为white 以外的其他内容，例如

containerMain: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'black'
    },