ReactNative制作Component控件并且复用(一)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/lift_class/article/details/56673118

废话1:最近开启了RN的学习模式,又因为根本没怎么写过博客(作为一个正经准码农这怎么行!),所以决定现在开始一边学习RN一边写博客记录自己的进程及进步


废话2:在我踏入RN的路上非常感谢RN中文网,我踏入RN就是依仗它了,这篇博客的例子也是在学习了晴明老师《如何制作一个按钮》后总结并自己琢磨到的一些知识点,也希望通过我分享出来能帮到一些朋友。


我们知道,在RN中有可以直接使用的控件(原谅我直接叫Component叫控件了吧,下同),比如使用按钮的话,有TouchableHighlihtTouchableNativeFeedbackTouchableOpacity这些可以直接导入使用。对于一个按钮来说,上面必须有代表着他的功能的文字,比如“确定”、“取消”。但是在RN中显示文本内容,又必须使用<Text></Text>来包裹文字,这就导致了使用TouchableOpacity的时候必须内部再嵌套一层<Text></Text>。也就是需要这样的代码:

export default class button extends Component {
  render() {
    return (
        <TouchableOpacity >
          <Text> { "确认" } </Text>
        </TouchableOpacity>
    );
  }
}

what??没有任何样式,甚至都看不清点击按钮的反馈??!

那先加上样式把他做的稍微像一个按钮再说吧:【index.andoid.js】

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
} from 'react-native';

export default class button extends Component {
  render() {
    return (
      <View style = { styles.container }>
        <TouchableOpacity style = { styles.button }>
          <Text style = { styles.btText }> { "确认" } </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    height: 30,
    width: 200,
    backgroundColor: '#0f0',
    borderRadius: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
  btText: {
    color: '#fff',
    fontSize: 16,
  },
});

AppRegistry.registerComponent('button', () => button);


好的,算是不错,长得像一个按钮了!

那么这个时候不禁会想:难道我每写一个按钮都要把这套代码搞上去吗?有一丢丢小麻烦呀!可不可以和Android原生一样直接用一个Button,然后设置文本和样式呢?

当然了,我写这个博客的意义就来了!复用Button减少重复代码


1.在项目目录下新建一个Button.js文件(比如在index.android.js同级目录下新建一个文件夹component,我的项目名为button,所以路径在:button/component/Button.js)。

2.在Button.js文件中写按钮,就是刚刚那串代码了==>>没错,直接copy过去就行了!

但是,但是,but:index.android.js是入口文件,而Button.js只是一个在需要的时候才导入使用的文件,所以还是有一些区别的!【Button.js】:

import React, { Component } from 'react';
import {
  // AppRegistry,-----Button.js不是入口文件,不需要
  StyleSheet,
  Text,
  // View,-----没有用到,干掉
  TouchableOpacity,
} from 'react-native';

// 这里特别注意 export default 关键字,只有加上关键字才能在其他文件引用本文件
// 注意class Button 是大写,与Button.js保持一致
export default class Button extends Component {
  render() {
    return (
      // 这层View只是在刚刚调整button的位置需要用到,单独一个button不需要考虑位置(由使用button的区域考虑),干掉
      // <View style = { styles.container }>
        <TouchableOpacity style = { styles.button }>
          <Text style = { styles.btText }> { "确认" } </Text>
        </TouchableOpacity>
      // </View>
    );
  }
}

const styles = StyleSheet.create({
  // 上面被干掉的View的样式,View被干掉了,这个样式当然也需要被干掉!
  // container: {
  //   flex: 1,
  //   justifyContent: 'center',
  //   alignItems: 'center',
  // },
  button: {
    height: 30,
    width: 200,
    backgroundColor: '#0f0',
    borderRadius: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
  btText: {
    color: '#fff',
    fontSize: 16,
  },
});

// 不是APP入口文件!干掉干掉
// AppRegistry.registerComponent('button', () => button);

到现在为止就写好了第一个可引入使用的控件,不信吗?那现在切换回【index.android.js】,我们来使用一下!

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  View,
} from 'react-native';

// 注意了!!就是这句话把刚刚写的Button.js引入使用!
// 导入 Button 从 './component/Button'(Buton.js文件的路径) 
// ----最后Button不需要写成Button.js
import Button from './component/Button';

export default class button extends Component {
  render() {
    return (
      <View style = { styles.container }>
       {/*通过import引入了Button控件后,就可以像下面这样直接使用这个控件*/}
        <Button>
        </Button>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

AppRegistry.registerComponent('button', () => button);


这个时候再double R


哇和刚刚一样??有没有搞错??(同时原谅我无耻的其实用的截图都是同一张,不过别担心,实际效果也是这样的)

和刚刚一样就对了!以后需要使用控件的时候直接导入Button.js然后通过<Button></Button>这样一下就有了一个按钮,是不是很方便呢?


写一个可复用的控件,并且在其他文件中引用,这一步已经完成了,那么想一下,不可能所有的按键都叫确定吧?不可能所有的按键颜色都是绿色,文本都是白色吧?……

这个时候就需要通过props来传递数据了

期待一下《ReactNative制作Component控件并且复用(二)》吧。嘻嘻

阅读更多

没有更多推荐了,返回首页