首页web前端 › 新萄京手机版官网React Native学习笔记之贰,reactnative

新萄京手机版官网React Native学习笔记之贰,reactnative

正文实例为大家分享了React
Native地址挑选器的完结代码,供大家参照他事他说加以调查,具体内容如下

React Native达成地点挑选器功能,reactnative

正文实例为大家享用了React
Native地址挑选器的贯彻代码,供大家参谋,具体内容如下

产品经营:“你通晓啊,这里向右划能够出菜谱,然后必要二个闪亮的动画片,还会有,小编想以此tab能够拉下来,你懂啊?

设计员:“别废话,把您要抄的出品给本人看下。”

接下去,大家仿一下别人家的地方挑选器

新萄京手机版官网 1

import React, { Component, PropTypes } from 'react';
import {
 ViewPropTypes,
 StyleSheet,
 View,
 TouchableOpacity,
 TouchableNativeFeedback,
 Platform,
 Animated,
 Text
} from 'react-native';

export default class SelectCityTabBar extends Component {
 //属性声名
 static propTypes = {
  goToPage: PropTypes.func,
  activeTab: PropTypes.number,
  tabs: PropTypes.array,
  backgroundColor: PropTypes.string,
  activeTextColor: PropTypes.string,
  inactiveTextColor: PropTypes.string,
  textStyle: Text.propTypes.style,
  tabStyle: ViewPropTypes.style,
  renderTab: PropTypes.func,
  underlineStyle: ViewPropTypes.style,
 };
 //默认属性
 static defaultProps = {
  activeTextColor: '#FA3D4F',
  inactiveTextColor: 'black',
  backgroundColor: null,
 }

 renderTab(name, page, isTabActive, onPressHandler) {
  const { activeTextColor, inactiveTextColor, textStyle, } = this.props;
  const textColor = isTabActive ? activeTextColor : inactiveTextColor;
  const fontWeight = isTabActive ? 'bold' : 'normal';
  const viewStyle = isTabActive ? [styles.tab, { borderBottomWidth: Constant.sizeDividerLarge, borderColor: Constant.colorPrimary }] : styles.tab;

  if (Platform.OS !== 'ios') {
   return <TouchableNativeFeedback
    delayPressIn={0}
    background={TouchableNativeFeedback.SelectableBackground()}
    key={name + page}
    accessible={true}
    accessibilityLabel={name}
    accessibilityTraits='button'
    onPress={() => onPressHandler(page)}
   >
    <View style={viewStyle}>
     <Text style={[{ color: textColor, fontWeight, }, textStyle,]}>
      {name}
     </Text>
    </View>
   </TouchableNativeFeedback>
  }

  return <TouchableOpacity
   key={name + page}
   accessible={true}
   accessibilityLabel={name}
   accessibilityTraits='button'
   onPress={() => onPressHandler(page)}
  >
   <View style={viewStyle}>
    <Text style={[{ color: textColor, fontWeight, }, textStyle,]}>
     {name}
    </Text>
   </View>
  </TouchableOpacity>;
 }

 render() {
  return (
   <View style={{ flexDirection: 'row', borderBottomWidth: Constant.sizeDividerNormal, borderColor: Constant.colorDivider }}>
    {this.props.tabs.map((name, page) => {
     const isTabActive = this.props.activeTab === page;
     const renderTab = this.props.renderTab || this.renderTab;
     return this.renderTab(name, page, isTabActive, this.props.goToPage);
    })}
   </View>
  );
 }
}



const styles = StyleSheet.create({
 tab: {
  alignItems: 'center',
  justifyContent: 'center',
  paddingBottom: 10,
  marginLeft: 10,
 },
 tabs: {
  height: 50,
  flexDirection: 'row',
  justifyContent: 'space-around',
  borderWidth: 1,
  borderTopWidth: 0,
  borderLeftWidth: 0,
  borderRightWidth: 0,
  borderColor: '#ccc',
 },
});

npm react-native-scrollable-tab-view 组件

import React, { Component } from 'react';
import {
 StyleSheet,
 View,
 ScrollView,
 Dimensions,
 TouchableOpacity,
 InteractionManager,
 Platform,
 UIManager,
 Text
} from 'react-native';
import ScrollableTabView from 'react-native-scrollable-tab-view';
import SelectCityTabBar from './SelectCityTabBar'
import AREA_JSON from '../../util/area.json';
const { height, width } = Dimensions.get('window');

export default class AddressSelect extends Component {

 static defaultProps = {
  commitFun: function (value) {
   console.log(value);
  },
  dissmissFun: function () {

  },
  lastAddress: null,
 };

 constructor(props) {
  super(props);
  if (Platform.OS === 'android') {
   UIManager.setLayoutAnimationEnabledExperimental(true)
  }
  const { lastAddress } = props;
  let selectAddress = this.initAddress(lastAddress);
  this.state = {
   selectAddress
  }
 }

 initAddress(lastAddress) {
  let selectAddress = [
   {
    value: null,
    label: null,
    children: AREA_JSON,
   }, {
    value: null,
    label: null,
    children: null,
   }, {
    value: null,
    label: null,
    children: null,
   }];
  let array = null;

  function fun(array, value) {
   for (let item of array) {
    if (item.value + '' === value + '') {
     return item;
    }
   }
  }
  try {
   selectAddress = selectAddress.map((item, index) => {
    let result = fun(array ? array : AREA_JSON, lastAddress[index].value);
    if (result.children) {
     array = result.children;
    }
    return result;
   });
  } catch (e) {
   console.log('-----e-', e);
  }
  return selectAddress
 }


 /**
  * 列表行
  * @param item
  * @param i
  * @returns {XML}
  */
 renderListItem(item, i) {
  let itemStyle = styles.itemStyle;
  let textStyle = styles.itemText;
  let { selectAddress } = this.state;
  if (item.label === selectAddress[i].label) {
   itemStyle = [itemStyle];
   textStyle = [textStyle, { color: 'red' }]
  }
  return (
   <TouchableOpacity
    style={itemStyle}
    key={i + item.label}
    onPress={() => {
     this.pressItem(item, i)
    }}
   >
    <Text style={textStyle}>{item.label}</Text>
   </TouchableOpacity>
  )
 }

 /**
  * 点击列表事件
  * @param item 选中数据
  * @param i 选中行数
  */
 pressItem(item, i) {
  let { selectAddress } = this.state;
  const initObj = {
   value: null,
   label: null,
   children: null,
  }
  let tempIndex = 0;
  if (i === 0) {
   selectAddress[0] = item;
   selectAddress[1] = initObj;
   selectAddress[2] = initObj;
   tempIndex = 1
  } else if (i === 1) {
   selectAddress[1] = item;
   selectAddress[2] = initObj;
   tempIndex = 2
  } else {
   selectAddress[2].value = item.value;
   selectAddress[2].label = item.label;
   tempIndex = 2
   let address = [
    {
     label: selectAddress[0].label,
     value: selectAddress[0].value
    },
    {
     label: selectAddress[1].label,
     value: selectAddress[1].value
    },
    {
     label: selectAddress[2].label,
     value: selectAddress[2].value
    }
   ]
   this.props.commitFun && this.props.commitFun(address);
   this.props.dissmissFun && this.props.dissmissFun();
   return null;

  }
  this.setState({ selectAddress });
  InteractionManager.runAfterInteractions(() => {
   this.tabView.goToPage(tempIndex)
  })

 }

 render() {
  const { selectAddress } = this.state;
  return (
   <View style={styles.container}>
    <View style={{ width: width, height: 40, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', }}>
     <Text>所在地区</Text>
    </View>
    <ScrollableTabView
     ref={(tabView) => {
      this.tabView = tabView;
     }}
     renderTabBar={() => <SelectCityTabBar />}
    >
     {selectAddress.map((obj, i) => {
      let array = (i === 0) ? AREA_JSON : selectAddress[i - 1].children;
      if (array) {
       return (
        <ScrollView
         key={i}
         tabLabel={obj.label || '请选择'}
         style={styles.scrollStyleList}
        >
         {array && array.map((obj2, j) => {
          return this.renderListItem(obj2, i)
         })}
        </ScrollView>
       )
      }
     })}
    </ScrollableTabView>
   </View>
  );
 }
}

const styles = StyleSheet.create({
 container: {
  height: height * 0.6,
  backgroundColor: '#F5FCFF',
 },
 scrollStyleList: {
  width: width,
  marginBottom: Constant.sizeMarginDefault,
  marginTop: Constant.sizeMarginDefault,
 },
 itemStyle: {
  marginTop: 5,
  width: width,
  height: 35,
  marginLeft: Constant.sizeMarginDefault,
  justifyContent: 'center'
 },
 itemText: {
  fontSize: 15,
  color: '#333333'
 },

利用形式:

import React, {Component} from 'react';
import {
 StyleSheet,
 View,
 TouchableOpacity,
 Alert,
 ScrollView,
 ART,
 TouchableHighlight,
 ListView,
 Dimensions,
 Text
} from 'react-native';

import {ReactNavComponent, Widget} from 'rn-yunxi';
import AddressSelect from '../../app-widget/address-select/index'

export default class extends React.Component {

 render() {
  return (
   <TouchableOpacity style={{flex:1, justifyContent:'center', alignItems:'center'}} onPress={() => this.openAddressSelect()}>
    <Text >地址选择</Text>
   </TouchableOpacity>
  );

 }

 openAddressSelect() {

  Widget.Popup.show( // 这边使用自己封装的modal嵌套地址选择器
   <AddressSelect
    commitFun={(area) => this.onSelectArea(area)}
    dissmissFun={() => Widget.Popup.hide()}
   />,
   {
    animationType: 'slide-up', backgroundColor: '#00000000', onMaskClose: () => {
    Widget.Popup.hide()
   }
   })
 }

 onSelectArea = (area) => {
  Log(area)
 }
};

数据类型格式

[
 {
  "value": "110000000000",
  "children": [
   {
    "value": "110100000000",
    "children": [
     {
      "value": "110101000000",
      "label": "东城区"
     },
     {
      "value": "110102000000",
      "label": "西城区"
     },
     {
      "value": "110105000000",
      "label": "朝阳区"
     },
     {
      "value": "110106000000",
      "label": "丰台区"
     },
     {
      "value": "110107000000",
      "label": "石景山区"
     },
     {
      "value": "110108000000",
      "label": "海淀区"
     },
     {
      "value": "110109000000",
      "label": "门头沟区"
     },
     {
      "value": "110111000000",
      "label": "房山区"
     },
     {
      "value": "110112000000",
      "label": "通州区"
     },
     {
      "value": "110113000000",
      "label": "顺义区"
     },
     {
      "value": "110114000000",
      "label": "昌平区"
     },
     {
      "value": "110115000000",
      "label": "大兴区"
     },
     {
      "value": "110116000000",
      "label": "怀柔区"
     },
     {
      "value": "110117000000",
      "label": "平谷区"
     },
     {
      "value": "110118000000",
      "label": "密云区"
     },
     {
      "value": "110119000000",
      "label": "延庆区"
     }
    ],
    "label": "北京市"
   }
  ],
  "label": "北京市"
 }
]

上述正是本文的全部内容,希望对我们的读书抱有扶助,也盼望我们多多扶助帮客之家。

Native完结地点挑选器作用,reactnative
本文实例为大家大饱眼福了React
Native地址挑选器的兑当代码,供咱们参照他事他说加以调查,具体内容如下
产品经营:“...

正文原创首发于民众号:ReactNative开拓圈,转发需表明出处。

React Native学习笔记之二,reactnative

1:怎么样创立1个react native工程

率先进入到内定文件夹里面,然后在极端实施react-native
init ReactNativeProject ;在那之中ReactNativeProject为工程的称号;

二:如何采取调试

能够先安装Chrome浏览器的插件React
Developer Tools 然后运维时在虚拟器上按command+D就能弹出选拔,能够用Stop Remote JS Debugging 就足以进去调节和测试页面,然后再按command+alt+J 就能够进入调理的详细页面;

新萄京手机版官网 2

 

三:查看React Native各组件的相关接口

而外能够在React
Native的中文网查看到有关音信,也足以直接查看源代码的JS文件,JS文件不仅仅有接口及相关表明,还会有实例代码;

新萄京手机版官网 3

稍许是社区维护的零件能够在下边这几个里面查找到,包涵相关的IOS跟安卓

新萄京手机版官网 4

四:WebStorm提供React Native代码智能提示作用

插件地址:

5:ECMAScript 陆入门知识

六:React/React
Native 的ES伍 ES陆写法对照表

Native学习笔记之二,reactnative 一:怎么着创建三个react native 工程
首先进入到钦命文件夹里面,然后在巅峰实施react-native init
ReactNativeProje...

出品首席推行官:“你精通啊,这里向右划能够出美食做法,然后供给一个闪亮的卡通片,还也可能有,我想以此tab能够拉下来,你懂吗?

新萄京手机版官网 5

设计员:“别废话,把你要抄的产品给自家看下。”

image.png

重整近日GitHub上的React
Native相关学习仿照效法能源,会不定时更新(希望能够持之以恒下去)。

转载本站文章请注明出处:新萄京娱乐网址2492777 http://www.cdhbjs.com/?p=3477

上一篇:

下一篇:

相关文章