react native 学习记录

最新推荐文章于 2024-08-13 08:21:55 发布

原创最新推荐文章于 2024-08-13 08:21:55 发布 · 261 阅读

0 ·

CC 4.0 BY-SA版权

js 同时被 2 个专栏收录

6 篇文章

订阅专栏

react native

2 篇文章

订阅专栏

本文介绍了一个使用React Native实现的应用导航案例，包括底部标签导航、堆叠导航和抽屉导航等不同导航模式的组合使用。通过具体的组件代码展示了如何在各屏幕间进行跳转。

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

import React from 'react';
import { Button, View, Text } from 'react-native';
import { createBottomTabNavigator,createStackNavigator ,createDrawerNavigator} from 'react-navigation';

class HomeScreen extends React.Component {
	static navigationOptions = {
    title: 'Home',
	drawerLabel: 'Home',
  };
  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')}
        />
      </View>
    );
  }mdd
}
class DetailsScreen extends React.Component {
	static navigationOptions = {
    title: 'Details',
	drawerLabel: 'Details',
  }; 
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Button
          title="Go to Details... again"
          onPress={() => this.props.navigation.navigate('Home')}
        />
      </View>
    );
  }
}

	
export default
createBottomTabNavigator({
  Home:createDrawerNavigator({
	Home:createStackNavigator({
	  Home: HomeScreen,
	}) ,
	  Details:createStackNavigator({
	  Details: DetailsScreen,
	}) 
	}),
	  Details: DetailsScreen,
})