1

我想把事情分解成组件。在我的App.js文件中，我希望看到来自<CreateAccount/>组件的文本输入框。问题是它给了我一个错误。只要我包含<View></View>，我的背景就会消失（只有一个白屏），我会在物理设备的左上角看到Email（从）。placeholder

我想让文本输入框直接位于标题下方My App。整个 React Native 与常规的 HTML 和 CSS 是如此不同，所以我想知道为什么会在我的情况下发生这种情况，我能做些什么来解决它？

这是App.js文件：

import React, {Component} from 'react';
import {View} from 'react-native';
import BackGround from './components/BackGround';
import CreateAccount from './components/CreateAccount';

export default class App extends Component {
    render() {
        return(
            <View>
                <BackGround/>
                <CreateAccount/>
            </View>
        );
    }
}

这是BackGround.js文件：

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

export default class BackGround extends Component {
    render() {
        return(
            <Image style={styles.container} source={require('../pictures/smoke.jpg')}>
                <Text style={styles.title}>My App</Text>
            </Image>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        width: null,
        height: null,
        backgroundColor: 'rgba(0,0,0,0)'
    },

    title: {
        paddingBottom: 390,
        fontSize: 50
    }
});

这是CreateAccount文件：

import React, {Component} from 'react';
import {TextInput} from 'react-native';

export default class CreateAccount extends Component {
    render() {
        return(
            <TextInput
                placeholder={"Email"}
                placeholderTextColor={"#f44242"}
            />
        );
    }
}
4

0 回答 0