【搭建react-native项目框架】2.添加内容页

我们需要先写几个tab的内容页和其他页面，来为下一节集成路由和tab做个铺垫。

先来看一下项目结构

如图添加一个home.js文件作为tab的内容页，代码如下

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

export default class HomeTabScreen extends Component {
    constructor(props){
        super(props);
    }

    render() {
        return (
            <View style={[global.styles.screen]}>
                <Text style={[global.styles.text]}>
                    this is HomeTabScreen.
                </Text>
            </View>
        )
    }
}

这里的global.styles.screen和global.styles.text是全局样式变量，可以在App.js里面这样定义

global.styles = StyleSheet.create({
    screen: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#e6e6e6',
    },
    container: {
        backgroundColor: '#e6e6e6',
    },
    text: {
        color: '#2c2c2c',
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
});

同home.js，我们再添加3个tab内容页headset.js、bought.js、mine.js。

然后添加2个其他的内容页，这里我添加了signInOrUp.js和signIn.js

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

export default class SignInOrUpScreen extends Component {
    constructor(props){
        super(props);
    }

    render() {
        return (
            <View style={[global.styles.screen]}>
                <Text style={[global.styles.text]}>
                    this is SignInOrUpScreen.
                </Text>
            </View>
        )
    }
}

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

export default class SignInScreen extends Component {
    constructor(props){
        super(props);
    }

    render() {
        return (
            <View style={[global.styles.screen]}>
                <Text style={[global.styles.text]}>
                    this is SignInScreen.
                </Text>
            </View>
        )
    }
}