react-native 小栗子

路由使用react-navigation。createStackNavigator和createBottomTabNavigator结合使用。
例子包含欢迎页，tabbar页面，详情页面。

import React, { Component } from 'react';
import { Image, Button, View, Text, StyleSheet, } from 'react-native';
import { createStackNavigator, createBottomTabNavigator, createAppContainer } from 'react-navigation';


const styles = StyleSheet.create({
    icon: {
        width: 20,
        height: 20
    },
    wel: {
        top: 50,
        width: 300,
        height: 400
    }
});


class Welcome extends Component {
    static navigationOptions = {
        header: null
    };
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Welcome Screen</Text>
                <Button
                    title="Go to Home"
                    onPress={() => {
                        this.props.navigation.replace('tabs');
                    }}
                />
                <Image style={styles.wel} source={{ uri: 'https://pic.52112.com/icon_pack_thumb/201901/21190030_fd7893728c.png' }}></Image>
            </View >
        );
    }
}

class Details extends Component {
    static navigationOptions = {
        headerStyle: {
            backgroundColor: '#6699ff',
        },
        headerTitle: '详情',
        headerTintColor: '#ffffff',
        headerTitleStyle: {
            fontWeight: 'normal',
        }
    };
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Details Screen</Text>
                <Button
                    title="Go to Home"
                    onPress={() => {
                        this.props.navigation.navigate('home', {
                            itemId: 86,
                            otherParam: 'anything you want here',
                        });
                    }}
                />
            </View >
        );
    }
}

class Home extends Component {
    static navigationOptions = {
        headerStyle: {
            backgroundColor: '#6699ff',
        },
        title: '首页',
        headerTintColor: '#ffffff',
        headerTitleStyle: {
            fontWeight: 'normal',
        },
        tabBarIcon: ({ focused }) => {
            if (focused) {
                return <Image style={styles.icon} source={{ uri: 'https://pic.52112.com/icon/256/20190322/33737/1652392.png' }}></Image>
            } else {
                return <Image style={styles.icon} source={{ uri: 'https://pic.52112.com/icon/256/20190322/33737/1652390.png' }}></Image>
            }
        }
    };
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Home Screen</Text>
                <Button
                    title="Go to Details"
                    onPress={() => {
                        this.props.navigation.navigate('details', {
                            itemId: 86,
                            otherParam: 'anything you want here',
                        });
                    }}
                />
            </View>
        );
    }
}
class Mine extends Component {
    static navigationOptions = {
        headerStyle: {
            backgroundColor: '#6699ff',
        },
        title: '我的',
        headerTintColor: '#ffffff',
        headerTitleStyle: {
            fontWeight: 'normal',
        },
        tabBarIcon: ({ focused }) => {
            if (focused) {
                return <Image style={styles.icon} source={{ uri: 'https://pic.52112.com/icon/256/20190322/33737/1652389.png' }}></Image>
            } else {
                return <Image style={styles.icon} source={{ uri: 'https://pic.52112.com/icon/256/20190322/33737/1652364.png' }}></Image>
            }
        }
    };
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Mine Screen</Text>
                <Button
                    title="Go to Details"
                    onPress={() => {
                        this.props.navigation.navigate('details', {
                            itemId: 86,
                            otherParam: 'anything you want here',
                        });
                    }}
                />
            </View>
        );
    }
}



const TabContainer = createBottomTabNavigator({
    home: Home,
    mine: Mine
});


const stack = createStackNavigator({
    welcome: Welcome,
    details: Details,
    tabs: {
        screen: TabContainer,
        navigationOptions: {
            header: null
        }
    }
});



const AppContainer = createAppContainer(stack);

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