如果你通过React.createClass方法自定义了一个组件,直接给它设置样式 prop 是不会生效的,你得把样式 props 层层向下传递给子组件

,直到子组件是一个能够直接定义样式的原生组件。同理,我们也需要把setNativeProps传递给由原生组件封装的子组件。

具体要做的就是在我们的自定义组件中再封装一个setNativeProps方法,其内容为对合适的子组件调用真正的setNativeProps方法,并传递要设置的参数。

import React from 'react';
import { Text, TouchableOpacity, View } from 'react-native'; class MyButton extends React.Component {
setNativeProps = (nativeProps) => {
this._root.setNativeProps(nativeProps);
} render() {
return (
<View ref={component => this._root = component} {...this.props}>
<Text>{this.props.label}</Text>
</View>
)
}
} export default class App extends React.Component {
render() {
return (
<TouchableOpacity>
<MyButton label="Press me!" />
</TouchableOpacity>
)
}
}

setNativeProps to clear TextInput value

先看效果图

import React from 'react';
import { TextInput, Text, TouchableOpacity, View } from 'react-native'; export default class App extends React.Component {
clearText = () => {
this._textInput.setNativeProps({text: ''});
} render() {
return (
<View style={{flex: 1}}>
<TextInput
ref={component => this._textInput = component}
style={{height: 50, flex: 1, marginHorizontal: 20, borderWidth: 1, borderColor: '#ccc'}}
/>
<TouchableOpacity onPress={this.clearText}>
<Text>Clear text</Text>
</TouchableOpacity>
</View>
);
}
}

demo自:https://reactnative.cn/docs/direct-manipulation/

react-native中的setNativeProps的更多相关文章

  1. React Native 中 CSS 的使用

    首先声明,此文原作者为黎 跃春 React Native中CSS 内联样式 对象样式 使用Stylesheet.Create 样式拼接 导出样式对象 下面的代码是index.ios.js中的代码: / ...

  2. react native中的欢迎页(解决首加载白屏)

    参照网页: http://blog.csdn.net/fengyuzhengfan/article/details/52712829 首先是在原生中写一些方法,然后通过react native中js去 ...

  3. React Native中的网络请求fetch和简单封装

    React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810 ...

  4. [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势

    http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...

  5. [转] 在React Native中使用ART

    http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...

  6. react native中使用echarts

    开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...

  7. react native中一次错误排查 Error:Error: Duplicate resources

    最近一直在使用react native中,遇到了很多的坑,同时也学习到了一些移动端的开发经验. 今天在做一个打包的测试时,遇到了一个问题,打包过程中报错“Error:Error: Duplicate ...

  8. 在React Native中,使用fetch网络请求 实现get 和 post

    //在React Native中,使用fetch实现网络请求 /* fetch 是一个封装程度更高的网络API, 使用了Promise * Promise 是异步编程的一种解决方案 * Promise ...

  9. 《React Native 精解与实战》书籍连载「React Native 中的生命周期」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  10. react native中如何往服务器上传网络图片

    let common_url = 'http://192.168.1.1:8080/'; //服务器地址 let token = ''; //用户登陆后返回的token /** * 使用fetch实现 ...

随机推荐

  1. Codeforces 1154G Minimum Possible LCM

    题目链接:http://codeforces.com/problemset/problem/1154/G 题目大意: 给定n个数,在这些数中选2个数,使这两个数的最小公倍数最小,输出这两个数的下标(如 ...

  2. composer 下载包慢的解决方法

    方法一: 修改 composer 的全局配置文件(推荐方式) 打开命令行窗口(windows用户)或控制台(Linux.Mac 用户)并执行如下命令: composer config -g repo. ...

  3. postman+jenkins+newman自动化api接口测试

    一.下载nodejs https://nodejs.org/zh-cn/download/ 二.linux下解压 xz -d node-v8.11.3-linux-x64.tar.xz tar xf ...

  4. URL & QRcode auto generator

    URL & QRcode auto generator 二维码 npm & qrcode https://www.npmjs.com/package/qrcode https://ww ...

  5. Django数据库操作中You are trying to add a non-nullable field 'name' to contact without a default错误处理

    name = models.CharField(max_length=50) 执行:python manage.py makemirations出现以下错误: You are trying to ad ...

  6. php2

    session   //将用户的会话数据存储在服务端,通过 session_start()开启session,通过$_SESSION读写session session_start(); //开启ses ...

  7. MySQL列类型选择

    比如年龄这个字段可以使用  1990-03-15  也可以用  19900315表示在列类型上可以选择 char 和 int:如果一个字段可以选择多种类型,尽量选择一个更快的类型:字段类型优先级   ...

  8. FastJson、Jackson、Gson进行Java对象转换Json细节处理

    前言 Java对象在转json的时候,如果对象里面有属性值为null的话,那么在json序列化的时候要不要序列出来呢?对比以下json转换方式 一.fastJson 1.fastJson在转换java ...

  9. springmvc拦截器匹配规则

  10. Python读取excel中的图片

    作为Java程序员,Java自然是最主要的编程语言.但是Java适合完成大型项目,对于平时工作中小的工作任务,需要快速完成,易于修改和调试,使用Java显得很繁琐,需要进行类的设计,打成jar包,出现 ...