communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > React-Native réalise la liaison gauche et droite (avec code)

React-Native réalise la liaison gauche et droite (avec code)

php中世界最好的语言
Libérer： 2018-04-18 10:21:38
original
3001 Les gens l'ont consulté

Cette fois, je vais vous proposer React-Native pour réaliser une liaison gauche et droite (avec code). Quelles sont les précautions pour réaliser une liaison gauche et droite avec React-Native. un cas pratique. Jetons un coup d'oeil.

L'utilisation de React Native est également très importante pour certaines personnes engagées dans le développement de React Native. Cet article vous présentera comment réaliser une liaison gauche et droite de listes dans React Native. un problème qui préoccupe de nombreuses personnes. Examinons l'exemple de code en détail.

1 : Les listes chaînées gauche et droite sont très courantes au travail.

Aujourd'hui, je vais partager un exemple écrit par un collègue sur lequel je n'ai apporté que de simples modifications.

Remarque : Le code source doit être modifié pour cet exemple, merci de vous référer à l'article 3 de cet article.

Deux : Codage

ParcelPage.js :

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  FlatList,
  SectionList,
  Dimensions,
  TouchableOpacity,
  Image,
} from 'react-native';
import ParcelData from './ParcelData.json'
var { width, height } = Dimensions.get('window');
let Headers = [];
export default class ParcelPage extends Component {
  static navigationOptions = ({ navigation }) => ({
    headerTitle : '联动List',
  });
  componentDidMount() {
    ParcelData.map((item, i) => {
      Headers.push(item.section);
    });
  };
  componentWillUnmount() {
    Headers = [];
  };
  renderLRow = (item) => {
    return (
      <TouchableOpacity style={[ styles.lItem, {backgroundColor: item.index == this.state.cell ? &#39;white&#39; : null} ]}
               onPress={()=>this.cellAction(item)}>
        <Text style={styles.lText}>{ item.item.section }</Text>
      </TouchableOpacity>
    )
  };
  cellAction = (item) => {
    if (item.index <= ParcelData.length) {
      this.setState({
        cell : item.index
      });
      if (item.index > 0) {
        var count = 0;
        for (var i = 0;
          i < item.index;
          i++) {
          count += ParcelData[ i ].data.length + 1
        }
        this.refs.sectionList.scrollToIndex({ animated : false, index : count })
      } else {
        this.refs.sectionList.scrollToIndex({ animated : false, index : 0 });
      }
    }
  };
  itemChange = (info) => {
    let section = info.viewableItems[ 0 ].section.section;
    if (section) {
      let index = Headers.indexOf(section);
      if (index < 0) {
        index = 0;
      }
      this.setState({ cell : index });
    }
  };
  state = {
    cell : 0
  };
  renderRRow = (item) => {
    return (
      <View style={ styles.rItem }>
        <Image style={ styles.icon } source={{ uri : item.item.img }}/>
        <View style={ styles.rItemDetail }>
          <Text style={ styles.foodName }>{ item.item.name }</Text>
          <View style={ styles.saleFavorite }>
            <Text style={ styles.saleFavoriteText }>{ item.item.sale }</Text>
            <Text style={ [styles.saleFavoriteText,{ marginLeft:15 }]}>{ item.item.favorite }</Text>
          </View>
          <Text style={ styles.moneyText }>￥{ item.item.money }</Text>
        </View>
      </View>
    )
  };
  sectionComp = (section) => {
    return (
      <View style={{height:30,backgroundColor:&#39;#DEDEDE&#39;,justifyContent:&#39;center&#39;,alignItems:&#39;center&#39;}}>
        <Text >{section.section.section}</Text>
      </View>
    )
  };
  separator = () => {
    return (
      <View style={{height:1,backgroundColor:&#39;gray&#39;}}/>
    )
  };
  render() {
    return (
      <View style={ styles.container }>
        <FlatList
          ref=&#39;FlatList&#39;
          style={ styles.leftList }
          data={ ParcelData }
          renderItem={(item) => this.renderLRow(item)}
          ItemSeparatorComponent={ () => this.separator() }
          keyExtractor={ (item) => item.section }
        />
        <SectionList
          ref=&#39;sectionList&#39;
          style={ styles.rightList }
          renderSectionHeader={ (section) => this.sectionComp(section) }
          renderItem={ (item) => this.renderRRow(item) }
          sections={ ParcelData }
          keyExtractor={ (item) => item.name }
          onViewableItemsChanged={ (info) => this.itemChange(info) }
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container : {
    flexDirection : 'row'
  },
  leftList : {
    width : 1 * width / 4,
    backgroundColor : '#E9E9EF'
  },
  lItem : {
    minHeight : 44,
    justifyContent : 'center',
  },
  lText : {
    marginLeft : 10,
    marginRight : 10,
    fontSize : 16,
  },
  rightList : {
    width : 3 * width / 4
  },
  rItem : {
    flexDirection : 'row'
  },
  rItemDetail : {
    flex : 1,
    marginTop : 10,
    marginLeft : 5
  },
  icon : {
    height : 60,
    width : 60,
    marginTop : 10,
    marginBottom : 10,
    marginLeft : 8,
    borderWidth : 1,
    borderColor : '#999999'
  },
  foodName : {
    fontSize : 18,
  },
  saleFavorite : {
    flexDirection : 'row',
    marginTop : 5,
    marginBottom : 5,
  },
  saleFavoriteText : {
    fontSize : 13,
  },
  moneyText : {
    color : 'orange'
  },
});
Copier après la connexion

ParcelData.js

[
 {
  "section" : "热销",
  "data" : [
   {
    "name" : "蟹黄汤包",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "20",
    "img":"http://p1.meituan.net/deal/392303113449301.jpg"
   },
   {
    "name" : "小馄饨",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p1.meituan.net/deal/849d8b59a2d9cc5864d65784dfd6fdc6105232.jpg"
   },
   {
    "name" : "蟹黄汤包+牛杂粉丝汤套餐",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "35",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   },
   {
    "name" : "鸭血粉丝汤",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "15",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   }
  ]
 },
 {
  "section" : "介绍我们",
  "data" : [
   {
    "name" : "慎用差评！任何问题联系我们就可解决哦",
    "sale" : "月售1",
    "favorite" : "赞0",
    "money" : "0",
    "img":"http://p1.meituan.net/deal/392303113449301.jpg"
   }
  ]
 },
 {
  "section" : "折扣套餐",
  "data" : [
   {
    "name" : "特色蟹黄汤包+鸭血粉丝汤+果汁套餐",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "50",
    "img":"http://p1.meituan.net/deal/392303113449301.jpg"
   },
   {
    "name" : "蟹黄汤包+牛杂粉丝汤套餐",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "35",
    "img":"http://p1.meituan.net/deal/849d8b59a2d9cc5864d65784dfd6fdc6105232.jpg"
   },
   {
    "name" : "蟹黄汤包+南瓜粥+果汁套餐",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   },
   {
    "name" : "金牌蟹黄汤包+紫米粥+柠檬果汁套餐",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   },
   {
    "name" : "台式卤肉饭+南瓜粥套餐",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   }
  ]
 },
 {
  "section" : "纯手工汤宝",
  "data" : [
   {
    "name" : "金牌蟹黄汤包",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p1.meituan.net/deal/392303113449301.jpg"
   },
   {
    "name" : "蟹庭丰特色蟹黄汤包",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p1.meituan.net/deal/849d8b59a2d9cc5864d65784dfd6fdc6105232.jpg"
   },
   {
    "name" : "蟹黄汤包",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   },
   {
    "name" : "干贝汤包",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   },
   {
    "name" : "鲍鱼汤包",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   },
   {
    "name" : "全家福汤包",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   },
   {
    "name" : "虾仁汤包",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   }
  ]
 },
 {
  "section" : "汤、粥类",
  "data" : [
   {
    "name" : "紫米粥",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p1.meituan.net/deal/392303113449301.jpg"
   },
   {
    "name" : "金丝南瓜粥",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p1.meituan.net/deal/849d8b59a2d9cc5864d65784dfd6fdc6105232.jpg"
   },
   {
    "name" : "小米粥",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   },
   {
    "name" : "白粥",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   }
  ]
 },
 {
  "section" : "面食类",
  "data" : [
   {
    "name" : "鸡汤面",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p1.meituan.net/deal/392303113449301.jpg"
   },
   {
    "name" : "红烧小排面",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p1.meituan.net/deal/849d8b59a2d9cc5864d65784dfd6fdc6105232.jpg"
   },
   {
    "name" : "红烧牛肉面",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   }
  ]
 },
 {
  "section" : "调味小菜",
  "data" : [
   {
    "name" : "肉松",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p1.meituan.net/deal/392303113449301.jpg"
   },
   {
    "name" : "辣椒包",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p1.meituan.net/deal/849d8b59a2d9cc5864d65784dfd6fdc6105232.jpg"
   },
   {
    "name" : "泡菜",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   },
   {
    "name" : "酱黄瓜",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   },
   {
    "name" : "萝卜干",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   }
  ]
 },
 {
  "section" : "饮料",
  "data" : [
   {
    "name" : "可乐",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p1.meituan.net/deal/392303113449301.jpg"
   },
   {
    "name" : "雪碧",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p1.meituan.net/deal/849d8b59a2d9cc5864d65784dfd6fdc6105232.jpg"
   },
   {
    "name" : "王老吉",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   },
   {
    "name" : "橙汁",
    "sale" : "月售875",
    "favorite" : "赞31",
    "money" : "10",
    "img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
   }
  ]
 }
]
Copier après la connexion

Troisième : Modifier le code source

1-:Liste des sections

node_modules/react-native/Libraries/Lists/SectionList.js,代码格式化后大概在187行的位置，修改如下
 class SectionList<SectionT: SectionBase&llt;any>>
  extends React.PureComponent<DefaultProps, Props<SectionT>, void> {
  props: Props<SectionT>;
  static defaultProps: DefaultProps = defaultProps;
  render() {
    const List = this.props.legacyImplementation ? MetroListView : VirtualizedSectionList;
    return <List
      ref={this._captureRef}
      {...this.props} />;
  }
  _captureRef = (ref) => {
    this._listRef = ref;
  };
  scrollToIndex = (params: { animated?: ?boolean, index: number, viewPosition?: number }) => {
    this._listRef.scrollToIndex(params);
  }
}
Copier après la connexion

2-:Liste de sections virtualisée

Le chemin se trouve dans node_modules/react-native/Libraries/Lists/VirtualizedSectionList.js, et est modifié comme suit vers la ligne 253 : 

render() {
    return <VirtualizedList
      ref={this._captureRef}
      {...this.state.childProps} />;
  }
  _captureRef = (ref) => {
    this._listRef = ref;
  };
  scrollToIndex = (params: { animated?: ?boolean, index: number, viewPosition?: number }) => {
    this._listRef.scrollToIndex(params);
  }
Copier après la connexion

Je crois que vous maîtrisez la méthode après avoir lu le cas dans ce Article Pour des informations plus intéressantes, veuillez prêter attention à php Chinois Autres articles connexes en ligne !

Lecture recommandée :

Explication détaillée de la mise en œuvre de l'autorisation Shiro

Comment vue proxyTable implémente le débogage des requêtes inter-domaines de l'interface

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
react-native 代码 联动
source：php.cn
Article précédent：Comment créer une table de multiplication en utilisant JS Article suivant：Cache frontal d'opération JS
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Comment déclencher le rendu (avec filtre et pagination) sur la méthode de tri dans React ? Voici mon composant de style Sort.js : <SortWrapper><SortText>SortBy</SortT...
Depuis 2024-04-06 21:28:37
0
1
2257
La mise à jour du statut ne fonctionne pas dans React-Native sur Android J'ai du code qui contient des paires d'images dans une galerie horizontale pouvant être gl...
Depuis 2024-04-06 16:54:10
0
1
410
Pourquoi l'omission de 0 ms de veille interrompt-elle mes transitions CSS ? J'essaie d'implémenter une animation FLIP pour voir si je la comprends bien. Dans ce codep...
Depuis 2024-04-06 16:29:50
0
2
490
Élément enfant React non valide (trouvé : objet avec la clé {clientVersion}). Si vous souhaitez afficher une collection d'éléments enfants, utilisez plutôt un tableau J'ai un formulaire en plusieurs étapes et lorsque j'essaie de le soumettre, cette erreur s...
Depuis 2024-04-06 16:25:39
0
1
346
React Three Fiber : Pourquoi mes événements de défilement sont-ils en retard ? Dans ReactThreeFiber, j'ai un composant React qui génère un sprite que je souhaite conserv...
Depuis 2024-04-06 13:39:24
0
1
410
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal