javascript - 将页面导入到 App.js 时，它显示为空白

Question

我对 React Native 相当陌生，并且在将其导入到 App.js 时很难显示此页面。它本身可以工作，但是当我尝试清理东西并将代码放入自己的文件中并调用它时，事情就出了问题。

分解事物；

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

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

感谢您的帮助，我比您知道的更感激。我为我的无知道歉! 如果这只是另一个拼写错误，我不会感到惊讶。

顺便说一句，我确信我的代码很糟糕!假设我的风格是一种有趣的做事方式!学习...

欢迎.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

问题出在您的欢迎组件样式中。您将文本设置为白色，所以...它都是白色的。

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
  }

@编辑 此外，您没有在应用程序组件中应用样式。它应该看起来像这样:

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