ReactNative进阶（七）：导航组件 react-navigation_react native导航栏组件(1)

用户33914928060
95 阅读13分钟

最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~

祝大家都能收获大厂offer~

篇幅有限，仅展示部分内容

开源分享：docs.qq.com/doc/DSmRnRG… // 注册导航 const Navs = StackNavigator({ Home: { screen: Tabs }, HomeTwo: { screen: HomeTwo, // 必须, 其他都是非必须 path:'app/homeTwo', // 使用url导航时用到, 如 web app 和 Deep Linking navigationOptions: {} // 此处参数设置会覆盖组件内的static navigationOptions设置. 具体参数详见下文； }, HomeThree: { screen: HomeThree }, HomeFour: { screen: HomeFour } }, { initialRouteName: 'Home', // 默认显示界面 navigationOptions: { // 屏幕导航的默认选项, 也可以在组件内用 static navigationOptions 设置(会覆盖此处的设置) header: { // 导航栏相关设置项 backTitle: '返回', // 左上角返回键文字 style: { backgroundColor: '#fff' }, titleStyle: { color: 'green' } }, cardStack: { gesturesEnabled: true } }, mode: 'card', // 页面切换模式, 左右是card(相当于iOS中的push效果), 上下是modal(相当于iOS中的modal效果) headerMode: 'screen', // 导航栏的显示模式, screen: 有渐变透明效果, float: 无透明效果, none: 隐藏导航栏 onTransitionStart: ()=>{ console.log('导航栏切换开始'); }, // 回调 onTransitionEnd: ()=>{ console.log('导航栏切换结束'); } // 回调 });


当然页面配置选项 `navigationOptions` 还可以在对应页面中去静态配置。




// 配置页面导航选项
static navigationOptions = ({navigation}) => ({
    title: 'HOME',
    titleStyle: {color: '#ff00ff'},
    headerStyle:{backgroundColor:'#000000'}
});

render() {
    return (
        <View></View>
    )
};

}


在页面采用静态方式配置 `navigationOptions` 中的属性，会覆盖 `StackNavigator` 构造函数中两个参数 `RouteConfigs` 和 `StackNavigatorConfig` 配置的 `navigationOptions` 里面的对应属性。


`navigationOptions` 中属性的优先级是：



> 
> `页面中静态配置 > RouteConfigs > StackNavigatorConfig`
> 
> 
> 


至此，就可以在组件中直接使用该配置了，当然我们也可以像文章开头提过的那样使用：

const Navigator = StackNavigator(RouteConfigs, StackNavigatorConfig);

export default class Main extends Component { render() { return ( ) }; }


至此，我们已经配置好导航器和对应的路由页面，但是我们还需要`navigation`才能实现页面的跳转。


#### 3.3 navigation 控制页面跳转


在导航器中的每一个页面，都有 `navigation` 属性，该属性有以下几个属性/方法，可以在组件下`console.log(this.props)`查看。



> 
> * `navigate` - 跳转到其他页面；
> * `state` - 当前页面导航器的状态；
> * `setParams` - 更改路由的参数；
> * `goBack` - 返回；
> * `dispatch` - 发送一个`action`；
> 
> 
> 


**`navigate`**

this.props.navigation.navigate(‘Two’, { name: ‘two’ }) // push下一个页面



> 
> * `routeName`: 注册过的目标路由名称;
> * `params`: 传递的参数，传递到下一级界面 ;
> * `action`:如果该界面是一个`navigator`的话，将运行这个`sub-action`;
> 
> 
> 


**`state`**  
 `state` 里面包含有传递过来的参数 `params`、`key` 、路由名称 `routeName`。



> 
> * `routeName`: 路由名;
> * `key`: 路由身份标识;
> * `params`: 参数;
> 
> 
> 


**`setParams`**  
 `this.props.navigation.setParams`  
 该方法允许界面更改`router`中的参数，可以用来动态更改导航栏的内容。比如可以用来更新头部的按钮或者标题。


**`goBack`**  
 返回上一页，可以不传参数，也可以传参数，还可以传 `null` 。

this.props.navigation.goBack(); // 回退到上一个页面 this.props.navigation.goBack(null); // 回退到任意一个页面 this.props.navigation.goBack('Home'); // 回退到Home页面


**`dispatch`**

this.props.navigation.dispatch


可以`dispatch`一些`action`，主要支持的`action`有：


**`1. Navigate`**

import { NavigationActions } from 'react-navigation'

const navigationAction = NavigationActions.navigate({ routeName: 'Profile', params: {},

// navigate can have a nested navigate action that will be run inside the child router
action: NavigationActions.navigate({ routeName: 'SubProfileRoute'})

}) this.props.navigation.dispatch(navigationAction)


**`2. Reset`**  
 `Reset`方法会清除原来的路由记录，添加上新设置的路由信息, 可以指定多个`action`，`index`是指定默认显示的那个路由页面, 注意不要越界！

import { NavigationActions } from 'react-navigation'

const resetAction = NavigationActions.reset({ index: 0, actions: [ NavigationActions.navigate({ routeName: 'Profile'}), NavigationActions.navigate({ routeName: 'Two'}) ] }) this.props.navigation.dispatch(resetAction)


**`SetParams`**  
 为指定的`router`更新参数，该参数必须是已经存在于`router`的`param`中。

import { NavigationActions } from 'react-navigation'

const setParamsAction = NavigationActions.setParams({ params: {}, // these are the new params that will be merged into the existing route params // The key of the route that should get the new params key: 'screen-123', }) this.props.navigation.dispatch(setParamsAction)


#### 3.4 页面跳转，传值，回调传参


跳转，传值

const {navigate} = this.props.navigation; <TouchableHighlight onPress={()=>{ navigate('PlanDetail',{name:'leslie',id:100}); }}>

// 返回上一页 this.props.navigation.goBack();


在下一界面接收参数  
 通过 `this.props.navigation.state.params` 接收参数

export default class Home1 extends Component { static navigationOptions = { // title 可以这样设置成一个函数， state 会自动传过来 title: ({state}) => ${state.params.name}, };

  componentDidMount() {
      const {params} = this.props.navigation.state;
      const id = params.id;
  }
}


#### 3.5 回调传参


当前界面进行跳转

navigate('Detail',{ // 跳转的时候携带一个参数去下个页面 callback: (data)=>{ console.log(data); // 打印值为：'回调参数' } });


下一界面在返回之前传参

const {navigate,goBack,state} = this.props.navigation; // 在第二个页面,在goBack之前,将上个页面的方法取到,并回传参数,这样回传的参数会重走render方法 state.params.callback('回调参数'); goBack();


### 四、TabNavigator 即 Tab 选项卡

TabNavigator(RouteConfigs, TabNavigatorConfig)


`api`和 `StackNavigator` 类似，参数 `RouteConfigs` 是路由配置，参数 `TabNavigatorConfig`是`Tab`选项卡配置。


如果要实现底部选项卡切换功能，可以直接使用`react-navigation`提供的`createBottomTabNavigator`接口，并且此导航器需要使用`createAppContainer`函数包裹后才能作为`React`组件被正常调用。例如：

import React, {PureComponent} from 'react'; import {StyleSheet, Image} from 'react-native'; import {createAppContainer, createBottomTabNavigator} from 'react-navigation'

import Home from './tab/HomePage'
import Mine from './tab/MinePage'

const BottomTabNavigator = createBottomTabNavigator( { Home: { screen: Home, navigationOptions: () => ({ tabBarLabel: '首页', tabBarIcon:({focused})=>{ if(focused){ return( //选中的图片 ) }else{ return( //默认图片 ) } } }), }, Mine: { screen: Mine, navigationOptions: () => ({ tabBarLabel: '我的', tabBarIcon:({focused})=>{ … } }) } }, { //默认参数设置 initialRouteName: 'Home', tabBarPosition: 'bottom', showIcon: true, showLabel: true, pressOpacity: 0.8, tabBarOptions: { activeTintColor: 'green', style: { backgroundColor: '#fff', }, } } );

const AppContainer = createAppContainer(BottomTabNavigator);

export default class TabBottomNavigatorPage extends PureComponent { render() { return ( ); } }


#### 4.1 RouteConfigs 路由配置


路由配置和 `StackNavigator` 中是一样的，配置路由以及对应的 `screen` 页面，`navigationOptions` 为对应路由页面的配置选项：



> 
> * `title` - `Tab`标题，可用作`headerTitle` 和 `tabBarLabel` 回退标题;
> * `tabBarVisible` -`Tab`是否可见，没有设置的话默认为 `true`;
> * `tabBarIcon` - `Tab`的`icon`组件，可以根据 `{focused:boolean, tintColor: string}` 方法来返回一个`icon`组件;
> * `tabBarLabel` -`Tab`中显示的标题字符串或者组件，也可以根据 `{ focused: boolean, tintColor: string }`;方法返回一个组件;
> 
> 
> 


代码示例：

Mine: { screen: MineScene, navigationOptions: ({ navigation }) => ({ tabBarLabel: '我的', tabBarIcon: ({ focused, tintColor }) => ( <TabBarItem tintColor={tintColor} focused={focused} normalImage={require('./img/tabbar/pfb_tabbar_mine@2x.png')} selectedImage={require('./img/tabbar/pfb_tabbar_mine_selected@2x.png')} /> ) }), },


**`TabBarItem`自定义组件**

class TabBarItem extends PureComponent { render() { let selectedImage = this.props.selectedImage ? this.props.selectedImage : this.props.normalImage return ( <Image source={this.props.focused ? selectedImage : this.props.normalImage} style={{ tintColor: this.props.tintColor, width: 25, height: 25 }} /> ); } }


### 五、TabNavigatorConfig Tab选项卡配置


* `tabBarComponent` - Tab选项卡组件，有 `TabBarBottom` 和 `TabBarTop` 两个值，在`iOS`中默认为 `TabBarBottom` ，在`Android`中默认为 `TabBarTop` 。


	1. `TabBarTop` - 在页面顶部;
	2. `TabBarBottom` - 在页面底部;
* `tabBarPosition` - Tab选项卡的位置，有`top`或`bottom`两个值


	1. `top`：上面
	2. `bottom`：下面
* `swipeEnabled` - 是否可以滑动切换`Tab`选项卡;
* `animationEnabled` - 点击`Tab`选项卡切换界面是否需要动画;
* `lazy` - 是否懒加载页面;
* `initialRouteName` - 初始显示的`Tab`对应的页面路由名称;
* `order` - 用路由名称数组来表示`Tab`选项卡的顺序，默认为路由配置顺序;
* `paths` - 路径配置;
* `backBehavior` - `android`点击返回键时的处理，有 `initialRoute` 和 `none` 两个值：


	1. `initailRoute` - 返回初始界面;
	2. `none` - 退出;
* `tabBarOptions` - Tab配置属性，用在`TabBarTop`和`TabBarBottom`时有些属性不一致：


用于 `TabBarTop` 时：



> 
> * `activeTintColor` - 选中的文字颜色;
> * `inactiveTintColor` - 未选中的文字颜色;
> * `showIcon` -是否显示图标，默认显示;
> * `showLabel` - 是否显示标签，默认显示;
> * `upperCaseLabel` - 是否使用大写字母，默认使用;
> * `pressColor` - `android 5.0`以上的MD风格波纹颜色;
> * `pressOpacity` - `android5.0`以下或者`iOS`按下的透明度;
> * `scrollEnabled` - 是否可以滚动;
> * `tabStyle` - 单个Tab的样式;
> * `indicatorStyle` - 指示器的样式;
> * `labelStyle` - 标签的样式;
> * `iconStyle` - `icon`的样式;
> * `style` -整个TabBar的样式;
> 
> 
> 


用于 `TabBarBottom` 时：



> 
> * `activeTintColor` - 选中Tab的文字颜色;
> * `inactiveTintColor` - 未选中Tab的的文字颜色;
> * `activeBackgroundColor` - 选中Tab的背景颜色;
> * `inactiveBackgroundColor` -未选中Tab的背景颜色;
> * `showLabel` - 是否显示标题，默认显示;
> * `style` - 整个TabBar的样式;
> * `labelStyle` -标签的样式;
> * `tabStyle` - 单个Tab的样式;
> 
> 
> 


使用底部选项卡：

import React, {Component} from 'react'; import {StackNavigator, TabBarBottom, TabNavigator} from "react-navigation"; import HomeScreen from "./index18/HomeScreen"; import NearByScreen from "./index18/NearByScreen"; import MineScreen from "./index18/MineScreen"; import TabBarItem from "./index18/TabBarItem"; export default class MainComponent extends Component { render() { return ( ); } }

const TabRouteConfigs = { Home: { screen: HomeScreen, navigationOptions: ({navigation}) => ({ tabBarLabel: '首页', tabBarIcon: ({focused, tintColor}) => ( <TabBarItem tintColor={tintColor} focused={focused} normalImage={require('./img/tabbar/pfb_tabbar_homepage_2x.png')} selectedImage={require('./img/tabbar/pfb_tabbar_homepage_selected_2x.png')} /> ), }), }, NearBy: { screen: NearByScreen, navigationOptions: { tabBarLabel: '附近', tabBarIcon: ({focused, tintColor}) => ( <TabBarItem tintColor={tintColor} focused={focused} normalImage={require('./img/tabbar/pfb_tabbar_merchant_2x.png')} selectedImage={require('./img/tabbar/pfb_tabbar_merchant_selected_2x.png')} /> ), }, } , Mine: { screen: MineScreen, navigationOptions: { tabBarLabel: '我的', tabBarIcon: ({focused, tintColor}) => ( <TabBarItem tintColor={tintColor} focused={focused} normalImage={require('./img/tabbar/pfb_tabbar_mine_2x.png')} selectedImage={require('./img/tabbar/pfb_tabbar_mine_selected_2x.png')} /> ), }, } }; const TabNavigatorConfigs = { initialRouteName: 'Home', tabBarComponent: TabBarBottom, tabBarPosition: 'bottom', lazy: true, }; const Tab = TabNavigator(TabRouteConfigs, TabNavigatorConfigs); const StackRouteConfigs = { Tab: { screen: Tab, } }; const StackNavigatorConfigs = { initialRouteName: 'Tab', navigationOptions: { title: '标题', headerStyle: {backgroundColor: '#5da8ff'}, headerTitleStyle: {color: '#333333'}, } }; const Navigator = StackNavigator(StackRouteConfigs, StackNavigatorConfigs);


使用顶部选项卡：

import React, {Component} from "react"; import {StackNavigator, TabBarTop, TabNavigator} from "react-navigation"; import HomeScreen from "./index18/HomeScreen"; import NearByScreen from "./index18/NearByScreen"; import MineScreen from "./index18/MineScreen"; export default class MainComponent extends Component { render() { return ( ); } }

const TabRouteConfigs = { Home: { screen: HomeScreen, navigationOptions: ({navigation}) => ({ tabBarLabel: '首页', }), }, NearBy: { screen: NearByScreen, navigationOptions: { tabBarLabel: '附近', }, } , Mine: { screen: MineScreen, navigationOptions: { tabBarLabel: '我的', }, } }; const TabNavigatorConfigs = { initialRouteName: 'Home', tabBarComponent: TabBarTop, tabBarPosition: 'top', lazy: true, tabBarOptions: {} }; const Tab = TabNavigator(TabRouteConfigs, TabNavigatorConfigs); const StackRouteConfigs = { Tab: { screen: Tab, } }; const StackNavigatorConfigs = { initialRouteName: 'Tab', navigationOptions: { title: '标题', headerStyle: {backgroundColor: '#5da8ff'}, headerTitleStyle: {color: '#333333'}, } }; const Navigator = StackNavigator(StackRouteConfigs, StackNavigatorConfigs);


当然，除了支持创建底部选项卡之外，`react-navigation`还支持创建顶部选项卡，此时只需要使用`react-navigation`提供的[createMaterialTopTabNavigator](https://docs.qq.com/doc/DSmRnRGxvUkxTREhO)即可。如果要使用实现抽屉式菜单功能，还可以使用`react-navigation`提供的`createDrawerNavigator`。


### 六、DrawerNavigator 抽屉导航


有一些`APP`都会采用**侧滑抽屉**来实现主页面导航，利用 `DrawerNavigator` 在`RN`中可以很方便实现抽屉导航。

DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)


和`TabNavigator`的构造函数一样，参数配置也类似。


**`RouteConfigs`**  
 抽屉导航的路由配置 `RouteConfigs` ，和 `TabNavigator` 的路由配置完全一样， `screen` 对应路由页面配置， `navigationOptions` 对应页面的抽屉配置：



> 
> * `title` - 抽屉标题，和 `headerTitle` 、 `drawerLabel` 一样；
> * `drawerLabel` -标签字符串，或者自定义组件， 可以根据 `{ focused: boolean, tintColor: string }`函数来返回一个自定义组件作为标签；
> * `drawerIcon` - 抽屉`icon`，可以根据 `{ focused: boolean,tintColor: string }` 函数来返回一个自定义组件作为`icon` ；
> 
> 
> 


**`DrawerNavigatorConfig` 属性配置**



> 
> * `drawerWidth` - 抽屉宽度，可以使用`Dimensions`获取屏幕宽度，实现动态计算；  
>  `drawerPosition` -抽屉位置，可以是 `left` 或者 `right`；
> * `contentComponent` - 抽屉内容组件，可以自定义侧滑抽屉中的所有内容，默认为`DrawerItems`；
> * `contentOptions` - 用来配置抽屉内容的属性。当用来配置 `DrawerItems` 是配置属性选项：
> 	1. `items` - 抽屉栏目的路由名称数组，可以被修改；
> 	2. `activeItemKey` - 当前选中页面的`key id`；
> 	3. `activeTintColor` - 选中条目状态的文字颜色；
> 	4. `activeBackgroundColor` - 选中条目的背景色；
> 	5. `inactiveTintColor` - 未选中条目状态的文字颜色；
> 	6. `inactiveBackgroundColor` - 未选中条目的背景色
> 	7. `onItemPress(route)` - 条目按下时会调用此方法；
> * `style` - 抽屉内容的样式；  
>  `labelStyle` -抽屉的条目标题/标签样式；
> * `initialRouteName` - 初始化展示的页面路由名称；
> * `order` -抽屉导航栏目顺序，用路由名称数组表示；
> * `paths` - 路径；
> * `backBehavior` -`android`点击返回键时的处理，有`initialRoute`和`none`两个值:
> 	1. initailRoute：返回初始界面;
> 	2. none ：退出
> 
> 
> 


抽屉导航示例：

import React, {Component} from 'react'; import {DrawerNavigator, StackNavigator, TabBarBottom, TabNavigator} from "react-navigation"; import HomeScreen from "./index18/HomeScreen"; import NearByScreen from "./index18/NearByScreen"; import MineScreen from "./index18/MineScreen"; import TabBarItem from "./index18/TabBarItem"; export default class MainComponent extends Component { render() { return ( ); } } const DrawerRouteConfigs = { Home: { screen: HomeScreen, navigationOptions: ({navigation}) => ({ drawerLabel : '首页', drawerIcon : ({focused, tintColor}) => ( <TabBarItem tintColor={tintColor} focused={focused} normalImage={require('./img/tabbar/pfb_tabbar_homepage_2x.png')} selectedImage={require('./img/tabbar/pfb_tabbar_homepage_selected_2x.png')} /> ), }), }, NearBy: { screen: NearByScreen, navigationOptions: { drawerLabel : '附近', drawerIcon : ({focused, tintColor}) => ( <TabBarItem tintColor={tintColor} focused={focused} normalImage={require('./img/tabbar/pfb_tabbar_merchant_2x.png')} selectedImage={require('./img/tabbar/pfb_tabbar_merchant_selected_2x.png')} /> ), }, }, Mine: { screen: MineScreen, navigationOptions: { drawerLabel : '我的', drawerIcon : ({focused, tintColor}) => ( <TabBarItem tintColor={tintColor} focused={focused} normalImage={require('./img/tabbar/pfb_tabbar_mine_2x.png')} selectedImage={require('./img/tabbar/pfb_tabbar_mine_selected_2x.png')} /> ), }, } }; const DrawerNavigatorConfigs = { initialRouteName: 'Home', tabBarComponent: TabBarBottom, tabBarPosition: 'bottom', lazy: true, tabBarOptions: {} }; const Drawer = DrawerNavigator(DrawerRouteConfigs, DrawerNavigatorConfigs); const StackRouteConfigs = { Drawer: { screen: Drawer, } }; const StackNavigatorConfigs = { initialRouteName: 'Drawer', navigationOptions: { title: '标题', headerStyle: {backgroundColor: '#5da8ff'}, headerTitleStyle: {color: '#333333'}, } }; const Navigator = StackNavigator(StackRouteConfigs, StackNavigatorConfigs);


#### 6.1 扩展功能


默认`DrawerView`不可滚动。要实现可滚动视图，必须使用`contentComponent`自定义容器:

{
drawerWidth：200，
抽屉位置：“对”
contentComponent：props => <DrawerItems {... props}> </ ScrollView>
}


可以覆盖导航使用的默认组件，使用`DrawerItems`自定义导航组件:

import {DrawerItems} from 'react-navigation';

const CustomDrawerContentComponent = (props) => (

<DrawerItems {... props} />

);


#### 6.2 嵌套抽屉导航


如果嵌套`DrawerNavigation`，抽屉将显示在父导航下方。


**自定义`react-navigation`适配顶部导航栏标题**  
 测试中发现，在`iphone`上标题栏的标题为居中状态，而在`Android`上则是居左对齐。所以需要修改源码，进行适配。  
 `【node_modules – react-navigation – src – views – Header.js】`的326行代码处，修改为如下：

title: {
bottom: 0,
left: TITLE_OFFSET,
right: TITLE_OFFSET,
top: 0,
position: 'absolute',
alignItems: 'center',
}


上面方法通过修改源码的方式其实略有弊端，毕竟扩展性不好。还有另外一种方式就是，在`navigationOptions`中设置`headerTitleStyle的alignSelf`为 ’ `center` ‘即可解决。  
 去除返回键文字显示


`【node_modules – react-navigation – src – views – HeaderBackButton.js】`的91行代码处，修改为如下即可。

{ Platform.OS === 'ios' &&
title &&
<Text
onLayout={this._onTextLayout}
style={[styles.title, { color: tintColor }]}
numberOfLines={1}
>
{backButtonTitle}
}


**动态设置头部按钮事件**  
 当我们在头部设置左右按钮时，肯定避免不了要设置按钮的单击事件，但是此时会有一个问题，`navigationOptions`是被修饰为`static`类型的，所以在按钮的`onPress`方法中不能直接通过`this`来调用`Component`中的方法。如何解决呢？


在官方文档中，作者给出利用设置`params`的思想来动态设置头部标题。我们可以利用这种方式，将单击回调函数以参数的方式传递到`params`，然后在`navigationOption`中利用`navigation`来取出，并设置到`onPress`即可：

componentDidMount () {
/** * 将单击回调函数作为参数传递 */
this.props.navigation.setParams({
switch: () => this.switchView()
}); }

/** * 切换视图 */
switchView() {
alert('切换')
}

static navigationOptions = ({navigation,screenProps}) => ({
headerTitle: '企业服务',
headerTitleStyle: CommonStyles.headerTitleStyle,
headerRight: (
<NavigatorItem icon={ Images.ic_navigator } onPress={ ()=> navigation.state.params.switch() }/>
),
headerStyle: CommonStyles.headerStyle
});


**结合BackHandler处理返回和点击返回键两次退出App效果**  
 点击返回键两次退出`App`效果的需求屡见不鲜。相信很多人在`react-navigation`下实现该功能都遇到了很多问题，例如，其他界面不能返回。也就是手机本身返回事件在`react-navigation`之前拦截了。如何结合`react-natigation`实现呢？和大家分享两种实现方式：


（1）在注册`StackNavigator`的界面中，注册`BackHandler`

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道

HTML

  • HTML5有哪些新特性？

  • Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

  • 如何实现浏览器内多个标签页之间的通信？

  • ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？

  • 简述⼀下src与href的区别？

  • cookies,sessionStorage,localStorage 的区别？

  • HTML5 的离线储存的使用和原理？

  • 怎样处理 移动端 1px 被 渲染成 2px 问题？

  • iframe 的优缺点？

  • Canvas 和 SVG 图形的区别是什么？

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  • 问：0.1 + 0.2 === 0.3 嘛？为什么？

  • JS 数据类型

  • 写代码：实现函数能够深度克隆基本类型

  • 事件流

  • 事件是如何实现的？

  • new 一个函数发生了什么

  • 什么是作用域？

  • JS 隐式转换，显示转换

  • 了解 this 嘛，bind，call，apply 具体指什么

  • 手写 bind、apply、call

  • setTimeout(fn, 0)多久才执行，Event Loop

  • 手写题：Promise 原理

  • 说一下原型链和原型链的继承吧

  • 数组能够调用的函数有那些？

  • PWA使用过吗？serviceWorker的使用原理是啥？

  • ES6 之前使用 prototype 实现继承

  • 箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

  • 事件循环机制 （Event Loop）

avatar
文章
阅读
粉丝