界面
// 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', }, });
附:
显示于隐藏标题栏的操作实现:https://blog.csdn.net/qq_41915690/article/details/80347219