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

guts716 发表于 Dev

胆量716

我对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;

椰子先生

问题出在您的“欢迎”组件样式中。您将文字涂成白色，所以...全是白色。

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
  }

@edit同样，您也没有在App组件中应用样式。它看起来应该像这样：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。