.bind native react_react native bind - CSDN
  • bind(this)

    bind的概念

    bind是javascript函数中常用的一个功能。

    bind()方法创建一个新的函数, 当被调用时,将其this关键字设置为提供的值,在调用新函数时,在任何提供之前提供一个给定的参数序列。

    以下是bind最简单的用法:

    this.x = 9; 
    var module = {
      x: 81,
      getX: function() { return this.x; }
    };
    
    module.getX(); // 返回 81
    
    var retrieveX = module.getX;
    retrieveX(); // 返回 9, 在这种情况下,"this"指向全局作用域
    
    // 创建一个新函数,将"this"绑定到module对象
    var boundGetX = retrieveX.bind(module);
    boundGetX(); // 返回 81

    bind函数到底做了什么操作,能使this绑定到我们需要绑定的对象当中?其实也就类似以下代码:

       Function.prototype.bind = function (scope) {
         var fn = this;
         return function () {
           fn.apply(scope);
         }
       } 

    返回新建了一个函数,并把需要绑定的作用域传递到这个新函数上。

    React中的bind

    在React或React-native的点击事件中,会经常用到bind(this)。
    比如说一个简单的React-native点击组件:

    export default class AwesomeProject extends Component {
      constructor(props){
        super(props);
        this.state = {
        }
      }
    
      handleClick () {
        console.log('this is:',this);
      }
    
      render() {
        return (
          <View style={styles.container}>
            <Text style={styles.welcome} onPress={this.handleClick.bind(this)}>
              Welcome to React Native!
            </Text>
          </View>
        );
      }
    
    }

    在上面的代码中,我们对点击事件函数进行了bind(this),如果不bind(this)的this会怎么样?
    这里写图片描述
    这里写图片描述
    上图是bind了this的,而下图是没有bind(this)的。如果没有bind(this),在执行这个函数时,取到的this是这个text组件。

    React中的bind方法的选择

    因为箭头函数与bind(this)的作用是一样的,所以我们可以有4种选择

      //写法1
      <View onPress={this.handleClick.bind(this)}></View>
    
      //写法2
      constructor(props){
        super(props);
        this.handleClick = this.handleClick.bind(this);
      }
    
      //写法3
      <View onPress={()=>this.handleClick()}>
    
      //写法4
      handleClick = () => {
    
      }

    因为bind方法会重新生成一个新函数,所以写法2和写法3每次render都会生成新的函数,所以建议使用1或4

    展开全文
  • 这个问题其实是一个 JavaScript 中的问题,因此我们学习react native的同胞们学习一下JavaScript很有必要的。JavaScript中jQury的bind方法为选定元素添加事件处理程序,规定事件发生时运行的函数。语法为:$...
    这个问题其实是一个 JavaScript 中的问题,因此我们学习react native的同胞们学习一下JavaScript很有必要的。JavaScript中jQury的bind方法为选定元素添加事件处理程序,规定事件发生时运行的函数。

    语法为:

    $(selector).bind(event,data,function)

    也就是相对应的event事件发生时就会执行function函数。data是传递数据的可选参数。event和function必须指定明确。

     在React Native中bind方法的作用也是这样,为指定的事件添加相应的处理函数。就是将处理函数和指定的操作绑定在一起。操作触发时函数执行。


    实现上面效果时,需要用bind方法将点击操作和弹窗绑定在一起。
    代码为:

           <TouchableOpacity
              style={styles.style_view_commit}
              onPress={this.show.bind(this,"XX")}
            >
              <Text style={{ color: '#fff' }}>
                按钮
              </Text>
            </TouchableOpacity>

    而其中的show函数:

      show(text){
        alert('确认名字为'+text+"?");
      }

    这是正确的绑定,实现了点击弹窗的效果。


    而当不通过bind方法时,直接调用this.show就是将代码改为如下(show方法不变):

         <TouchableOpacity
              style={styles.style_view_commit}
              onPress={this.show("XX")}
            >
              <Text style={{ color: '#fff' }}>
                按钮
              </Text>
            </TouchableOpacity>


    已经不可以直接点击来弹窗了。但是发现ReLoad时会出现弹窗。
    也就是说,没有bind时组件加载时会执行该函数,但是点击操作并不能使函数执行。

    当onPress写成this直接调用(this.show)时,只会在reload时调用一次,而后的点击操作并不会弹出alert。因为它就是在组件渲染加载时调用一次,并没有将点击操作和函数关联,做不到根据点击来执行show函数。通过bind就能解决,也就是说这里的bind绑定,是将点击事件这个操作和show函数联系在一起,当点击按钮操作时,就会执行这个函数。所以,bind函数就是建立操作和函数执行的这种联系。



    箭头函数也能完成事件绑定
    另外,上面的bind绑定操作和show函数可以直接通过箭头函数完成。箭头函数可以直接完成bind绑定(它会绑定当前scope的this引用)。可以参照ES6写法–React Native中文社区中ES5和ES6的比较–方法作为回调部分。
    也就是将上面实现代码写成如下形式:

          <TouchableOpacity
              style={styles.style_view_commit}
              onPress={()=>this.show("XX")}
            >
              <Text style={{ color: '#fff' }}>
                按钮
              </Text>
            </TouchableOpacity>

    所以,bind将事件操作和函数处理建立联系,bind和箭头函数都能完成这一绑定。
    展开全文
  • 由于国内能找到的react-native框架版本都不是最新的,在我搭建的时候遇到了很多坑都无法适用,所以在这里把我搭建的代码给大家参考一下。 首先列出各种工具的版本package.json文件: "react": "16.9.0", "react-...

    由于国内能找到的react-native框架版本都不是最新的,在我搭建的时候遇到了很多坑都无法适用,所以在这里把我搭建的代码给大家参考一下。

    首先列出各种工具的版本package.json文件:

    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-gesture-handler": "^1.5.1",
    "react-native-reanimated": "^1.4.0",
    "react-native-root-toast": "^3.2.0",
    "react-native-vector-icons": "^6.6.0",
    "react-navigation": "^4.0.10",
    "react-navigation-redux-helpers": "^4.0.1",
    "react-navigation-stack": "^1.10.3",
    "react-navigation-tabs": "^2.6.0",
    "react-redux": "^7.1.3",
    "redux": "^4.0.4",
    "redux-logger": "^3.0.6"

    说明:

    1.该项目使用官网的初始化方法。

    2.加入了react-navigation和redux,实现了栈和tab按钮路由方式,使用redux托管了路由状态,实现了双击返回键退出程序。

    3.实现了自定义iconfont的使用,但是实际使用效果不太理想,还需要大家根据需求修改,这里仅作为参考,react-native-vector-icons里边自带的推荐使用,自定义的还是更推荐使用图片代替。

    4.没有引入http的相关依赖,有需要的同学可以自己加。

    5.react-native是0.61.5版本,react-navigation是4.x版本,react-navigation-redux-helpers是4.x版本,react-redux是7.x版本。

    运行效果:

    项目结构:

    下面是关键文件的代码,普通页面组件就不上代码了:

    app.js

    /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     *
     * @format
     * @flow
     */
    
    import React from 'react';
    import { Provider } from 'react-redux'
    
    // import { store } from './src/redux/store'
    import { store2 } from './src/redux/store2'
    import MainView from './src/MainView'
    
    export default class RootApp extends React.Component {
      constructor(props) {
        super(props);
      }
    
      render() {
        // 渲染页面
        return (
          <Provider store={store2}>
            <MainView />
          </Provider>
        )
      }
    }

    MainView.js

    import React from 'react';
    import { connect } from 'react-redux'
    import { View, Text, Button, StyleSheet, BackHandler } from "react-native";
    import Route from "./config/route"
    import {
      reduxifyNavigator,
      createReactNavigationReduxMiddleware,
      createNavigationReducer,
      createReduxContainer
    } from 'react-navigation-redux-helpers'
    import { store2 } from './redux/store2'
    import { NavigationActions } from 'react-navigation'
    
    import Toast from "react-native-root-toast";
    
    
    const AppNavigation = createReduxContainer(Route, 'root')
    
    const mapStateToProps = state => ({
        state: state.nav
    });
      
    const NavigationLinkRedux = connect(mapStateToProps)(AppNavigation)
    
    const TOAST_CONFIG = {
        duration: 1000, // toast显示时长
        position: -50, // toast位置
        shadow: true, // toast是否出现阴影
        animation: true, // toast显示/隐藏的时候是否需要使用动画过渡
        hideOnPress: true, // 是否可以通过点击事件对toast进行隐藏
        delay: 0, // toast显示的延时
        onShow: () => { 
            // toast出现回调(动画开始时)
        },
        onShown: () => {
            // toast出现回调(动画结束时)
        },
        onHide: () => {
            // toast隐藏回调(动画开始时)
        },
        onHidden: () => {
            // toast隐藏回调(动画结束时)
        }
    }
    
    class MainView extends React.Component {
      
        constructor(props) {
          super(props);
          this.handleBack = this.handleBack.bind(this);
        }
    
        componentDidMount() {
            BackHandler.addEventListener('hardwareBackPress', this.handleBack)
        }
    
        componentWillUnmount() {
            BackHandler.removeEventListener('hardwareBackPress', this.handleBack)
        }
    
        handleBack = () => {
            console.log("MainView-this.state",this.state)
            console.log("MainView-this.props",this.props)
            if (this.props.state.index < 1) {
                if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) {
                    // 最近2秒内按过back键,可以退出应用。
                    return false;
                }
                this.lastBackPressed = Date.now();
                console.log('再按一下退出程序')
                Toast.show('再按一下退出程序',TOAST_CONFIG);
                return true;
            }
            if (this.props.state.index >= 1) {
                store2.dispatch(NavigationActions.back())
            }
            return true;
        }
      
        render() {
            return (
                <NavigationLinkRedux/>
            );
        }
    }
    
    export default connect(
        mapStateToProps
    )(MainView);

    route.js

    import React from "react";
    import { createAppContainer } from "react-navigation";
    import { createStackNavigator } from "react-navigation-stack";
    // 把安卓路由动画改为从右向左滑入
    import StackViewStyleInterpolator from 'react-navigation-stack/src/views/StackView/StackViewStyleInterpolator';
    import {name as appName} from '../../app.json';
    
    import TabNav from "./TabNav";
    
    import Login from "../pages/Login"
    import Register from "../pages/Register"
    import FirstDetail from "../pages/FirstDetail"
    
    const AppNavigator = createStackNavigator({
        Login: {
            screen: Login
        },
        Register: {
            screen: Register
        },
        TabNav: {
            screen: TabNav,
            navigationOptions: ({navigation}) => ({
                header: null
            })
        },
        FirstDetail: {
            screen: FirstDetail
        },
    },{
        // headerMode: 'screen',
        // 把安卓路由动画改为从右向左滑入
        transitionConfig: ()=>({
            /**
            * 1、从右向左:forHorizontal
            * 2、从下向上:forVertical
            * 3、安卓那种的从下向上:forFadeFromBottomAndroid
            * 4、无动画:forInitial
            */
            screenInterpolator: StackViewStyleInterpolator.forHorizontal
        }),
    })
    
    const container = createAppContainer(AppNavigator);
    // AppRegistry.registerComponent(appName, () => container);
    export default container;

    TabNav.js

    import React from 'react';
    import {createAppContainer} from 'react-navigation';
    // import { createBottomTabNavigator } from "react-navigation-stack";
    import { createBottomTabNavigator,createMaterialTopTabNavigator } from "react-navigation-tabs";
    
    import { View, Text, Button, StyleSheet } from "react-native";
    import Ionicons from 'react-native-vector-icons/Ionicons'
    import AntDesign from 'react-native-vector-icons/AntDesign'
    import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons'
    import IcoMoonIcon from '../assets/icomoon'
    
    import TabHome from '../pages/Tabs/TabHome';
    import TabFriend from '../pages/Tabs/TabFriend';
    import TabMine from '../pages/Tabs//TabMine';
    
    const Tab = createBottomTabNavigator(
        {
            TabHome: {
                screen: TabHome,
                navigationOptions: {
                    tabBarLabel: '主页',
                    tabBarIcon: ({tintColor, focused}) => (
                        <AntDesign
                        name='home'
                        size={24}
                        style={{color: tintColor}}
                        />
                        // <Ionicons
                        //     name={'ios-home'}
                        //     size={26}
                        //     style={{color: tintColor}}
                        // />
                    ),
                }
            },
            TabFriend: {
                screen: TabFriend,
                navigationOptions: {
                    tabBarLabel: '统计',
                    tabBarIcon: ({focused, tintColor}) => (
                        <AntDesign
                        name='barschart'
                        size={24}
                        style={{color: tintColor}}
                        />
                    ),
                }
            },
            TabMine: {
                screen: TabMine,
                navigationOptions: {
                    tabBarLabel: '我',
                    tabBarIcon: ({focused, tintColor}) => (
                        <AntDesign
                        name='user'
                        size={24}
                        style={{color: tintColor}}
                        />
                    ),
                }
            }
        },
        {
            tabBarOptions: {
                //当前选中的tab bar的文本颜色和图标颜色
                activeTintColor: '#4BC1D2',
                //当前未选中的tab bar的文本颜色和图标颜色
                inactiveTintColor: '#888888',
                //是否显示tab bar的图标,默认是false
                showIcon: true,
                //showLabel - 是否显示tab bar的文本,默认是true
                showLabel: true,
                //是否将文本转换为大小,默认是true
                // upperCaseLabel: false,
                //material design中的波纹颜色(仅支持Android >= 5.0)
                pressColor: '#788493',
                //按下tab bar时的不透明度(仅支持iOS和Android < 5.0).
                pressOpacity: 0.8,
                //tab bar的样式
                style: {
                    backgroundColor: '#fff',
                    paddingBottom: 0,
                    borderTopWidth: 0.2,
                    paddingTop:0,
                    borderTopColor: '#ccc',
                    height:45,
                    paddingTop:0,
                    borderWidth:0
                },
                //每个tab的样式
                tabStyle: {
                    borderWidth:0,
                    height:43,
                },
                //tab bar的文本样式
                labelStyle: {
                    height:11,
                    fontSize: 11,
                    // margin: 1
                },
                //tab 页指示符的样式 (tab页下面的一条线).
                indicatorStyle: {height: 0},
                //是否启用滚动标签。
                // scrollEnabled:true,//false,
            },
            //tab bar的位置, 可选值: 'top' or 'bottom'
            tabBarPosition: 'bottom',
            //是否允许滑动切换tab页
            swipeEnabled: true,
            scrollEndabled:true,
            //是否在切换tab页时使用动画
            animationEnabled: true,
            //是否懒加载
            lazy: true,
            //返回按钮是否会导致tab切换到初始tab页? 如果是,则设置为initialRoute,否则为none。 缺省为initialRoute。
            backBehavior: 'initialRoute',
        });
    const TabNav = createAppContainer(Tab);
    // AppRegistry.registerComponent(appName, () => TabNav);
    export default TabNav;

    store2.js

    import createLogger from 'redux-logger'
    import { combineReducers, createStore, applyMiddleware, compose } from 'redux'
    import {
      reduxifyNavigator,
      createReactNavigationReduxMiddleware,
      createNavigationReducer
    } from 'react-navigation-redux-helpers'
    
    import Route from "../config/route"
    
    const navReducer = createNavigationReducer(Route)
    
    const reducers = combineReducers({nav: navReducer})
    
    const middleware = createReactNavigationReduxMiddleware(
      state => state.nav,
      'root',
    )
    
    const configureStore = preloadedState => {
      return createStore(
        reducers,
        preloadedState,
        compose(
          applyMiddleware(middleware, createLogger)
        )
      )
    }
    
    export const store2 = configureStore()
    

     

    展开全文
  • 最近在学习react native 但是一直不明,为啥定义一个方法,在onPress中为啥要写成this.back.bind(this),我back就是一个方法为啥还要再bind(this). 其实就是一个作用域,绑定这个作用域中的方法。  那么其实我们有...

    最近在学习react native 但是一直不明,为啥定义一个方法,在onPress中为啥要写成this.back.bind(this),我back就是一个方法为啥还要再bind(this). 其实就是一个作用域,绑定这个作用域中的方法。 
    那么其实我们有两种写法去定义onPress的响应方法。

    1.不加bind(this)

    onPress={this.back}
    ....
      back = () => {
            const {navigator} = this.props;
            navigator.pop();
        }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    这种写法不用去bind了,

    ()=>{} 这种形式的代码,语法规定就是(function(){}).bind(this),即自动添加了bind this

    2.需要加bind

    onPress={this.back.bind(this)}
    
    ....
    
      back() {
            const {navigator} = this.props;
            navigator.pop();
        }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    这种要bind的

    展开全文
  • JavaScript中jQury的bind方法为选定元素添加事件处理程序,规定事件发生时运行的函数。    语法为: $(selector).bind(event,data,function) 1 2 也就是相对应的event事件发生时就会执行function函数。data是...

    这个问题其实是一个 JavaScript 中的问题。JavaScript中jQury的bind方法为选定元素添加事件处理程序,规定事件发生时运行的函数。 
      
    语法为:

    $(selector).bind(event,data,function)
    
    • 1
    • 2

    也就是相对应的event事件发生时就会执行function函数。data是传递数据的可选参数。event和function必须指定明确。 

     在React Native中bind方法的作用也是这样,为指定的事件添加相应的处理函数。就是将处理函数和指定的操作绑定在一起。操作触发时函数执行。 
     
     为了更明确的体现这种事件绑定关系,做下面实际例子:

     在点击登录按钮时,弹出alert对话框,效果如下(只是按钮点击与弹窗,输入框请忽略)。 
    这里写图片描述 

    实现上面效果时,需要用bind方法将点击操作和弹窗绑定在一起。 
    代码为:

           <TouchableOpacity
              style={styles.style_view_commit}
              onPress={this.show.bind(this,"XX")}
            >
              <Text style={{ color: '#fff' }}>
                登录
              </Text>
            </TouchableOpacity>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    而其中的show函数:

      show(text){
        alert('确认名字为'+text+"?");
      }
    • 1
    • 2
    • 3

    这是正确的绑定,实现了点击弹窗的效果。 
    而当不通过bind方法时,直接调用this.show   就是将代码改为如下(show方法不变):

         <TouchableOpacity
              style={styles.style_view_commit}
              onPress={this.show("XX")}
            >
              <Text style={{ color: '#fff' }}>
                登录
              </Text>
            </TouchableOpacity>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    此时的效果: 

    xiaoguo 

    已经不可以直接点击来弹窗了。但是发现ReLoad时会出现弹窗。 
    也就是说,没有bind时组件加载时会执行该函数,但是点击操作并不能使函数执行。

    当onPress写成this直接调用(this.show)时,只会在reload时调用一次,而后的点击操作并不会弹出alert。因为它就是在组件渲染加载时调用一次,并没有将点击操作和函数关联,做不到根据点击来执行show函数。通过bind就能解决,也就是说这里的bind绑定,是将点击事件这个操作和show函数联系在一起,当点击按钮操作时,就会执行这个函数。所以,bind函数就是建立操作和函数执行的这种联系。

     

    箭头函数也能完成事件绑定

    另外,上面的bind绑定操作和show函数可以直接通过箭头函数完成。箭头函数可以直接完成bind绑定(它会绑定当前scope的this引用)。可以参照ES6写法–React Native中文社区中ES5和ES6的比较–方法作为回调部分。 
    也就是将上面实现代码写成如下形式:

          <TouchableOpacity
              style={styles.style_view_commit}
              onPress={()=>this.show("XX")}
            >
              <Text style={{ color: '#fff' }}>
                登录
              </Text>
            </TouchableOpacity>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    所以,bind将事件操作和函数处理建立联系,bind和箭头函数都能完成这一绑定。

    展开全文
  • Uncaught TypeError: this.bind is not a function![图片说明](https://img-ask.csdn.net/upload/201905/05/1557048826_879348.png) 源码图片 ![图片说明]...
  • No .bind() or Arrow Function in JSX Propsissue fromhttps://github.com/MichaelCereda/react-native-form-generator/issues/45warning codeexport class InputField extends React.Component{ handleValidation...
  • React Native 报错 undefined is not a object (没有定义该对象),通常是报错的是在this.props.或者this.setState的地方报错。 this只的是当前对象 bind 为指定的事件添加相对应的函数,就是将处理函数和指定...
  • React Native提供了和web标准一致的Fetch API,用于满足开发者访问网络的需求。 发起网络请求 要从任意地址获取内容的话,只需简单地将网址作为参数传递给fetch方法即可: fetch('...
  • TextInput组件介绍输入框组件的主要属性如下: autoCapitalize : 枚举类型,可选值有none,sentences,words,characters.当用户输入时,用于提示。 placeholder:占位符,在输入前显示的文本内容。...
  • 了解前端框架之前先了解一下他们框架的模式,前端框架模式可以归结为三类分别为MVC,MVP,MVVM 1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分开。...
  • 为什么把这个知识点放在这里呢,因为我们在查找资料...JavaScript中jQury的bind方法为选定元素添加事件处理程序,规定事件发生时运行的函数,所以后期需要我们学习一下JavaScript 基本语法,不要着急哦。 语法为:...
  • 欢迎大家关注【跨平台开发那些事】公众号,定期推...基于最新版本React Native实现JsBundle预加载,界面秒开优化 一、开源库介绍 今年1月份,新开源的react-natvigation库备受瞩目。在短短不到3个月的时间,gith...
  • React Native最终展示的UI全是Native的UI,将Native的信息封装成React方便的调用。那么Native是如何封装成React调用的?NativeReact是如何交互的?
  • eslint --init copy pic2 to eslintrc.js { "csharp.format.enable": false, "workbench.iconTheme": "eq-material-theme-icons", "...editor.fontSize&quo
  • 有关一些资料rn中文网解释的很简略,想看详细一点的文档可以搜索React和ES6的相关文档,仔细看看没准儿 你就豁然开朗了! 复制代码 this 个人理解 有过Android开发经验的童鞋,对this这个对象都不陌生。使用起来很...
  • Vue.js与React.js从某些反面来说很相似,通过两个框架的学习,有时候对一些用法会有一点思考,为加深学习的思索,特翻阅了两个文档,从以下各方面进行了对比,加深了对这两个框架的认知。 1.数据绑定 1.1 Vue中有关...
  • 1.创建新项目,react-native init AwesomeProject命令长时间无响应,或报错shasum check failed react-native命令行从npm官方源拖代码时会遇上麻烦。请将npm仓库源替换为国内镜像: npm config set registry ...
  • 源码如下:'use strict'; import React, { AppRegistry, Component, StyleSheet, Text, View, ScrollView, PixelRatio, NavigatorIOS, ...} from 'react-native';class HelloWorld extends Comp
1 2 3 4 5 ... 20
收藏数 4,896
精华内容 1,958
关键字:

.bind native react