本文共 4641 字，大约阅读时间需要 15 分钟。

界面

// App.jsimport 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.jsimport 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 (            
   
     {                    ToastAndroid.show('没错，我不是司机，我是人民警察！', ToastAndroid.SHORT);                        navigate('Detail');                }}            >                
    
     点我！
                
           );    }}

//Cinema.jsimport 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 (            
                   
    
      {                        ToastAndroid.show('请慢慢欣赏', ToastAndroid.SHORT);                        navigate('Comfortable');                    }}>                    
     
      偷偷看你专属的小电影
                     
                
           );    }}

//Detail.jsimport 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: (            
                   
     Alert.alert("你被抓了回来", "真刺激",                        [                            {text: "接着逃", onPress: () => ToastAndroid.show('你被打了一顿后拖回了小黑屋', ToastAndroid.SHORT)},                            {text: "我这就回去", onPress: this.confirm}                        ]                    )}                />                    ),        headerPressColorAndroid: 'white',        headerTintColor: 'black',        gesturesEnabled: true,    };    render() {        return (            
                     
      
       等你好久了
                  
             );    }}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.jsimport 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: (            
                   
     Alert.alert("门关上了", "请慢慢欣赏",                        [                            {text: "踹门", onPress: () => ToastAndroid.show('铁门丝毫不动', ToastAndroid.LONG)},                            {text: "坐好", onPress: this.confirm}                        ]                    )}                />                    ),        headerPressColorAndroid: 'white',        headerTintColor: 'black',        gesturesEnabled: true,    };    render() {        return (            
                     
      
       天线宝宝开播了{"\n"}                    (本来想加个视频，但时间有限，先不加了)
                  
             );    }}const styles = StyleSheet.create({    container: {        flex: 1,        justifyContent: 'center',        alignItems: 'center',        backgroundColor: 'yellow',        borderWidth: 15,        borderColor: 'black',        borderStyle: 'solid',    },    wait: {        fontWeight: 'bold',        color: 'green',    },});
   

附：

显示于隐藏标题栏的操作实现：