react native多种导航混合使用

Z时代
2024-01-10
分类：综合

react

界面

// App.js
import React from 'react';
import {
    StackNavigator,
    TabNavigator,
} from 'react-navigation';
import Detail from "./pages/Detail";
import List from "./pages/List";
import Cinemas from "./pages/Cinema";
import Comfortable from "./pages/Comfortable";
const MyTab = TabNavigator({
    List: {screen: List},
    Cinemas: {screen: Cinemas},
}, {
    tabBarPosition: 'top',
    tabBarOptions: {
        style: {
            backgroundColor: 'black',
        }
    },
},);
const rn = StackNavigator({
    MyTab: {screen: MyTab},
    Detail: {screen: Detail},
    Comfortable: {screen: Comfortable},
});
export default rn;

//List.js
import React, {Component} from 'react';
import {
    TouchableOpacity,
    Text, ToastAndroid,
} from 'react-native';
export default class List extends Component {
    constructor(props) {
        super(props);
    }
    static navigationOptions = {
        title: '欢迎',
        header: null,
    };
    render() {
        const {navigate} = this.props.navigation;
        return (
            <TouchableOpacity
                onPress={() => {
                    ToastAndroid.show('没错，我不是司机，我是人民警察！', ToastAndroid.SHORT);
                        navigate('Detail');
                }}
            >
                <Text>点我！</Text>
            </TouchableOpacity>
        );
    }
}

//Cinema.js
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity, ToastAndroid,
} from 'react-native';
export default class Cinemas extends Component {
    static navigationOptions = {
        title: '专属影院',
        header: null,
    };
    render() {
        const {navigate} = this.props.navigation;
        return (
            <View>
                <TouchableOpacity
                    onPress={() => {
                        ToastAndroid.show('请慢慢欣赏', ToastAndroid.SHORT);
                        navigate('Comfortable');
                    }}>
                    <Text>偷偷看你专属的小电影</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

//Detail.js
import React, {Component} from 'react';
import {
    Text,
    View,
    Button,
    StyleSheet,
    Alert,
    ToastAndroid
} from 'react-native';
export default class Detail extends Component {
    static navigationOptions = {
        title: '小黑屋',
        headerStyle: {
            backgroundColor: 'black',
        },
        headerTitleStyle: {
            color: 'red',
            //居中显示
            alignSelf: 'center',
        },
        headerRight: (
            <View>
                <Button
                    title="逃狱"
                    onPress={() => Alert.alert("你被抓了回来", "真刺激",
                        [
                            {text: "接着逃", onPress: () => ToastAndroid.show('你被打了一顿后拖回了小黑屋', ToastAndroid.SHORT)},
                            {text: "我这就回去", onPress: this.confirm}
                        ]
                    )}
                />
            </View>
        ),
        headerPressColorAndroid: 'white',
        headerTintColor: 'black',
        gesturesEnabled: true,
    };
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.wait}>等你好久了</Text>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'black',
        borderWidth: 100,
        borderColor: 'red',
        borderStyle: 'solid',
    },
    wait: {
        fontWeight: 'bold',
        color: 'red',
    },
});

//Comfortable.js
import React, {Component} from 'react';
import {
    Text,
    View,
    Button,
    StyleSheet,
    Alert,
    ToastAndroid,
} from 'react-native';
export default class Comfortable extends Component {
    static navigationOptions = {
        title: '请不要做一些小动作',
        headerStyle: {
            backgroundColor: 'black',
        },
        headerTitleStyle: {
            color: 'yellow',
            //居中显示
            alignSelf: 'center',
        },
        headerRight: (
            <View>
                <Button
                    title="不看了"
                    onPress={() => Alert.alert("门关上了", "请慢慢欣赏",
                        [
                            {text: "踹门", onPress: () => ToastAndroid.show('铁门丝毫不动', ToastAndroid.LONG)},
                            {text: "坐好", onPress: this.confirm}
                        ]
                    )}
                />
            </View>
        ),
        headerPressColorAndroid: 'white',
        headerTintColor: 'black',
        gesturesEnabled: true,
    };
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.wait}>天线宝宝开播了{"\n"}
                    (本来想加个视频，但时间有限，先不加了)</Text>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'yellow',
        borderWidth: 15,
        borderColor: 'black',
        borderStyle: 'solid',
    },
    wait: {
        fontWeight: 'bold',
        color: 'green',
    },
});