Heim Web-Frontend js-Tutorial React Native implementiert die Adressauswahlfunktion

React Native implementiert die Adressauswahlfunktion

Apr 17, 2018 am 10:25 AM
native react 选择器

Dieses Mal bringe ich Ihnen React Native, um die Adressauswahlfunktion zu implementieren. Was sind die Vorsichtsmaßnahmen für die Implementierung der Adressauswahlfunktion in React Native? Das Folgende ist ein praktischer Fall.

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.sizepiderLarge, borderColor: Constant.colorPrimary }] : styles.tab;
  if (Platform.OS !== 'ios') {
   return <TouchableNativeFeedback
    delayPressIn={0}
    background={TouchableNativeFeedback.SelectableBackground()}
    key={name + page}
    accessible={true}
    accessibilityLabel={name}
    accessibilityTraits=&#39;button&#39;
    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=&#39;button&#39;
   onPress={() => onPressHandler(page)}
  >
   <View style={viewStyle}>
    <Text style={[{ color: textColor, fontWeight, }, textStyle,]}>
     {name}
    </Text>
   </View>
  </TouchableOpacity>;
 }
 render() {
  return (
   <View style={{ flexDirection: &#39;row&#39;, borderBottomWidth: Constant.sizepiderNormal, borderColor: Constant.colorpider }}>
    {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',
 },
});
Nach dem Login kopieren

npm-React-Native-Scrollable-Tab-View-Komponente

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: &#39;row&#39;, justifyContent: &#39;center&#39;, alignItems: &#39;center&#39;, }}>
     <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 || &#39;请选择&#39;}
         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'
 },
Nach dem Login kopieren

Anwendung:

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:&#39;center&#39;, alignItems:&#39;center&#39;}} 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)
 }
};
Nach dem Login kopieren

DatentypFormat

[
 {
  "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": "北京市"
 }
]
Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

React Native implementiert die Countdown-Funktion für den Bestätigungscode

Alles auswählen und die Auswahl im AngularJS-Warenkorb umkehren Kasse

Das obige ist der detaillierte Inhalt vonReact Native implementiert die Adressauswahlfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So erstellen Sie eine zuverlässige Messaging-App mit React und RabbitMQ So erstellen Sie eine zuverlässige Messaging-App mit React und RabbitMQ Sep 28, 2023 pm 08:24 PM

So erstellen Sie eine zuverlässige Messaging-Anwendung mit React und RabbitMQ Einführung: Moderne Anwendungen müssen zuverlässiges Messaging unterstützen, um Funktionen wie Echtzeitaktualisierungen und Datensynchronisierung zu erreichen. React ist eine beliebte JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen, während RabbitMQ eine zuverlässige Messaging-Middleware ist. In diesem Artikel wird erläutert, wie Sie React und RabbitMQ kombinieren, um eine zuverlässige Messaging-Anwendung zu erstellen, und es werden spezifische Codebeispiele bereitgestellt. RabbitMQ-Übersicht:

React Router-Benutzerhandbuch: So implementieren Sie die Front-End-Routing-Steuerung React Router-Benutzerhandbuch: So implementieren Sie die Front-End-Routing-Steuerung Sep 29, 2023 pm 05:45 PM

ReactRouter-Benutzerhandbuch: So implementieren Sie die Front-End-Routing-Steuerung Mit der Popularität von Single-Page-Anwendungen ist das Front-End-Routing zu einem wichtigen Bestandteil geworden, der nicht ignoriert werden kann. Als beliebteste Routing-Bibliothek im React-Ökosystem bietet ReactRouter umfangreiche Funktionen und benutzerfreundliche APIs, wodurch die Implementierung des Front-End-Routings sehr einfach und flexibel ist. In diesem Artikel wird die Verwendung von ReactRouter vorgestellt und einige spezifische Codebeispiele bereitgestellt. Um ReactRouter zuerst zu installieren, benötigen wir

PHP, Vue und React: Wie wählt man das am besten geeignete Frontend-Framework aus? PHP, Vue und React: Wie wählt man das am besten geeignete Frontend-Framework aus? Mar 15, 2024 pm 05:48 PM

PHP, Vue und React: Wie wählt man das am besten geeignete Frontend-Framework aus? Angesichts der kontinuierlichen Weiterentwicklung der Internettechnologie spielen Front-End-Frameworks eine wichtige Rolle bei der Webentwicklung. PHP, Vue und React sind drei repräsentative Frontend-Frameworks, jedes mit seinen eigenen einzigartigen Eigenschaften und Vorteilen. Bei der Auswahl des zu verwendenden Frontend-Frameworks müssen Entwickler eine fundierte Entscheidung treffen, die auf den Projektanforderungen, Teamfähigkeiten und persönlichen Vorlieben basiert. In diesem Artikel werden die Eigenschaften und Verwendungsmöglichkeiten der drei Front-End-Frameworks PHP, Vue und React verglichen.

Integration von Java-Framework und Front-End-React-Framework Integration von Java-Framework und Front-End-React-Framework Jun 01, 2024 pm 03:16 PM

Integration von Java-Framework und React-Framework: Schritte: Richten Sie das Back-End-Java-Framework ein. Projektstruktur erstellen. Konfigurieren Sie Build-Tools. Erstellen Sie React-Anwendungen. Schreiben Sie REST-API-Endpunkte. Konfigurieren Sie den Kommunikationsmechanismus. Praxisfall (SpringBoot+React): Java-Code: RESTfulAPI-Controller definieren. Reaktionscode: Rufen Sie die von der API zurückgegebenen Daten ab und zeigen Sie sie an.

Verwenden Sie den Pseudoklassenselektor :nth-child(n+3), um den Stil untergeordneter Elemente auszuwählen, deren Position größer oder gleich 3 ist Verwenden Sie den Pseudoklassenselektor :nth-child(n+3), um den Stil untergeordneter Elemente auszuwählen, deren Position größer oder gleich 3 ist Nov 20, 2023 am 11:20 AM

Verwenden Sie den Pseudoklassenselektor :nth-child(n+3), um den Stil untergeordneter Elemente auszuwählen, deren Position größer oder gleich 3 ist. Das spezifische Codebeispiel lautet wie folgt: HTML-Code: &lt;divid="container" &gt;&lt;divclass="item"&gt ;Erstes untergeordnetes Element&lt;/div&gt;&lt;divclass="item"&

So verwenden Sie React, um ein reaktionsfähiges Backend-Managementsystem zu entwickeln So verwenden Sie React, um ein reaktionsfähiges Backend-Managementsystem zu entwickeln Sep 28, 2023 pm 04:55 PM

So verwenden Sie React, um ein reaktionsfähiges Backend-Managementsystem zu entwickeln. Aufgrund der rasanten Entwicklung des Internets benötigen immer mehr Unternehmen und Organisationen ein effizientes, flexibles und einfach zu verwaltendes Backend-Managementsystem, um den täglichen Betrieb abzuwickeln. Als eine der derzeit beliebtesten JavaScript-Bibliotheken bietet React eine übersichtliche, effiziente und wartbare Möglichkeit, Benutzeroberflächen zu erstellen. In diesem Artikel wird erläutert, wie Sie mit React ein reaktionsfähiges Backend-Managementsystem entwickeln, und es werden konkrete Codebeispiele aufgeführt. Erstellen Sie zunächst ein React-Projekt

React Mobile Adaptation Guide: So optimieren Sie den Anzeigeeffekt von Front-End-Anwendungen auf verschiedenen Bildschirmen React Mobile Adaptation Guide: So optimieren Sie den Anzeigeeffekt von Front-End-Anwendungen auf verschiedenen Bildschirmen Sep 29, 2023 pm 04:10 PM

React Mobile Adaptation Guide: So optimieren Sie den Anzeigeeffekt von Front-End-Anwendungen auf verschiedenen Bildschirmen. Mit der rasanten Entwicklung des mobilen Internets haben sich in den letzten Jahren immer mehr Benutzer daran gewöhnt, Mobiltelefone zum Durchsuchen von Websites und zur Verwendung verschiedener Anwendungen zu verwenden . Allerdings variieren die Größen und Auflösungen verschiedener Mobiltelefonbildschirme stark, was gewisse Herausforderungen für die Frontend-Entwicklung mit sich bringt. Um sicherzustellen, dass die Website und die Anwendung auf verschiedenen Bildschirmen gute Anzeigeeffekte erzielen, müssen wir uns an das mobile Endgerät anpassen und den Front-End-Code entsprechend optimieren. Responsives Layout verwenden Responsives Layout ist ein

Welche Verschlüsse hat React? Welche Verschlüsse hat React? Oct 27, 2023 pm 03:11 PM

React verfügt über Abschlüsse wie Event-Handling-Funktionen, useEffect und useCallback, Komponenten höherer Ordnung usw. Ausführliche Einführung: 1. Abschluss der Ereignisbehandlungsfunktion: Wenn wir in React eine Ereignisbehandlungsfunktion in einer Komponente definieren, bildet die Funktion einen Abschluss und kann auf den Status und die Eigenschaften innerhalb des Komponentenbereichs zugreifen. Auf diese Weise können der Status und die Eigenschaften der Komponente in der Ereignisverarbeitungsfunktion verwendet werden, um interaktive Logik zu implementieren. 2. Abschlüsse in useEffect und useCallback usw.

See all articles