StackNavigator的简单使用

最新推荐文章于 2024-09-10 05:36:05 发布

原创最新推荐文章于 2024-09-10 05:36:05 发布 · 812 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react-native

React Native 专栏收录该内容

45 篇文章

订阅专栏

本文介绍了一个使用React Native实现的应用导航案例，包括StackNavigator和DrawerNavigator的配置方法，通过具体代码展示了如何设置导航栏、抽屉菜单及其图标，并演示了页面间的跳转逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

添加依赖：https://reactnavigation.org/docs/navigators/stack

/*TestScrene.js文件*/
import React, { Component } from 'react';
import {
	View,
	Image,
	Text,
	StyleSheet,
} from 'react-native';

export default class TestScrene extends Component <{}> {
	static navigationOptions = {
		//导航栏标题
		  title:'测试界面1',
         drawerLabel: '测试标题1',
        // Note: By default the icon is only shown on iOS. Search the  showIcon option below.
         drawerIcon: ({ tintColor }) => (
         <Image
             source={require('./image/home.png')}
            style={[{height: 30, width: 30,}, {tintColor: tintColor}]}
         />
         ),
	};
	render() {
		return (
			<View  style = {styles.main}/>
			);
	}
}
const styles = StyleSheet.create({
	main: {
		flex: 1,
		alignItems:  'center',
		backgroundColor: 'blue',
	},
});

/*TestScrene2.js 文件，跟上面的区别是没有导航栏*/
import React, { Component } from 'react';
import {
	View,
	StyleSheet,
	TouchableHighlight,
	Text,
	Image,
} from 'react-native';


export default class TestScrene2 extends Component <{}> {
	 static navigationOptions = {
          title:'测试界面2',
         drawerLabel: '测试标题2',
         //隐藏导航栏
         header: null,
        // Note: By default the icon is only shown on iOS. Search the  showIcon option below.
         drawerIcon: ({ tintColor }) => (
         <Image
             source={require('./image/home.png')}
            style={[{height: 30, width: 30,}, {tintColor: tintColor}]}
         />
      ),
   };
	render() {
		return (
			<TouchableHighlight  style = {styles.main} 
			onPress = {() => 
				//点击返回上一级界面
				this.props.navigation.goBack()
			}>
			 <Text style = {{flexDirection: 'row', flex: 1, backgroundColor: 'white'}}>Button</Text>
			</TouchableHighlight>
			);
	}
}
const styles = StyleSheet.create({
	main: {
		flex: 1,
		backgroundColor: 'green',
	},
});

/*App.js 文件*/
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Alert,
  Image,
} from 'react-native';

import {DrawerNavigator, StackNavigator, TabBarBottom, TabNavigator} from "react-navigation";

import TabBarItem from './TabBarItem';

import DeviceInfo from 'react-native-device-info';


import TestScrene from './TestScrene';
import TestScrene2 from './TestScrene2';
import HomeScrene from './HomeScene';



const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});
const SuperView_Default_MarginTop = DeviceInfo.getModel() == 'iPhone X' ? 32 : 0;
export default class App extends Component<{}> {

  render() {
    
    return (
      <Navigator/>

    );
  }
}

const DrawerRouteConfigs = {
    Home: {
        screen: HomeScrene,
        navigationOptions: ({navigation}) => ({
            drawerLabel : '首页',
            drawerIcon : ({focused, tintColor}) => (
                <TabBarItem
                    tintColor={tintColor}
                    focused={focused}
                    normalImage={require('./image/home.png')}
                    selectedImage={require('./image/happenings.png')}
                />
            ),
        }),
    }, 
    New1: {
        screen: TestScrene2,
        navigationOptions: ({navigation}) => ({
            drawerLabel : '另外一个',
            drawerIcon : ({focused, tintColor}) => (
                <TabBarItem
                    tintColor={tintColor}
                    focused={focused}
                    normalImage={require('./image/dining.png')}
                    selectedImage={require('./image/shopping.png')}
                />
            ),
        }),
    }, 
    New2: {
        screen: TestScrene,
        navigationOptions: ({navigation}) => ({
            drawerLabel : '新的一个',
            drawerIcon : ({focused, tintColor}) => (
                <TabBarItem
                    tintColor={tintColor}
                    focused={focused}
                    normalImage={require('./image/iclub.png')}
                    selectedImage={require('./image/shopping.png')}
                />
            ),
        }),
    },
};
const DrawerNavigatorConfigs = {
    initialRouteName: 'Home',
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    lazy: true,
    tabBarOptions: {}
};
const Drawer = DrawerNavigator(DrawerRouteConfigs, DrawerNavigatorConfigs);
//注册界面
const StackRouteConfigs = {
    Drawer: {
        screen: Drawer,
         navigationOptions: ({navigation}) => ({
             title:'首页',
         drawerLabel: '首页',


        // Note: By default the icon is only shown on iOS. Search the  showIcon option below.
         drawerIcon: ({ tintColor }) => (
         <Image
             source={require('./image/home.png')}
            style={[{height: 30, width: 30,}, {tintColor: tintColor}]}
         />
           ),
        }),
    },
    Test: {
      screen: TestScrene2,
    },
    TestNew: {
      screen: TestScrene,
    },
};
const Navigator = StackNavigator(StackRouteConfigs);

/*HomeScene.js 文件*/
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Alert,
  Image,
} from 'react-native';
import TitleView from './MyTitleView';
import MyNavBar from './MyNavTab';
import MenuButton from './menu_button';

export default class HomeScene extends Component<{}> {
	
  render() {
    return (

        <View style = {styles.container}>
        <MyNavBar leftimage = {require('./qqww.png')} rightimage = {require('./image/app_icon.png')} 
        centerimage = {require('./image/menu.png')}/>
        <TitleView title = 'HAPPENINGS'/>
        <Image style = {styles.image} source = {require('./image/banner.png')}/>
        <View style = {styles.menu} >
        <MenuButton title = 'test1' path = {require('./image/iclub.png')} 
        touchUpInside = {() =>  
        	//跳转到 Test 界面
        	this.props.navigation.navigate('Test')
        }
        />
        <MenuButton title = 'test2'path = {require('./image/happenings.png')} touchUpInside = {() => this.props.navigation.navigate('TestNew')}/>
        </View>
        <View style = {styles.menu2} >
           <MenuButton title = 'test1' path = {require('./image/shopping.png')} touchUpInside = {() => Alert.alert("3")}/>
        <MenuButton title = 'test2'path = {require('./image/dining.png')}  touchUpInside = {() => Alert.alert("4")}/>
        </View>
        </View>
    );
  }
   
}


const styles = StyleSheet.create({
  menu: {
    flex: 1,
    flexDirection: 'row' ,

    alignItems:  'center' , 
    justifyContent: 'space-around',
  },
  menu2: {
      flex: 1,
    flexDirection: 'row' ,

    alignItems:  'center' , 
    justifyContent: 'space-around',
  },
  image: {
    width: '100%',
    height: 200,
    resizeMode: 'cover',
  },
  container: {
    marginTop: 0,
    flex: 1,
    backgroundColor: 'white',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});