пытаясь расширить или уменьшить представление внутри «плоского списка» при нажатии на них в зависимости от их текущего состояния - PullRequest
Новая
       64

пытаясь расширить или уменьшить представление внутри «плоского списка» при нажатии на них в зависимости от их текущего состояния

0 голосов
/ 20 сентября 2019

Я пытаюсь расширить или уменьшить представление в пределах Flatlist при нажатии на них в зависимости от их текущего состояния.Я использую данные в mobx и подключаю их к компоненту реакции.Даже если console.log подтверждает, что состояние меняется после нажатия на представление, оно не расширяется при нажатии.Это работало, когда данные находились в состоянии реакции, но мне пришлось переместить их в mobx из-за разного взаимодействия в программном обеспечении.Я думаю, что синтаксис действия и логика должны быть изменены, или это может быть что-то еще.Пожалуйста, кто-нибудь может помочь?

код mobx ниже: 

import {observable, action} from 'mobx';
import {LayoutAnimation} from 'react-native'



class StateStorage {



@observable  materials = [
    {


      name: 'RAG',
      price: '$',
      image: require("./Icons/RAG.jpg"),
      expanded: false 
},
    {


      name: 'GRAPE',
      price: '$',
      image: require("./Icons/GRAPE.jpg"),
      expanded: false 
},
    {


      name: 'FLAG',
      price: '$',
      image: require("./Icons/FLAG.jpg"),
      expanded: false 
},
   @action changeLayout(index) {
            LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
            this.materials[index].expanded= !this.materials[index].expanded
            console.log(this.materials[index].expanded)
          }
  @action chooseMaterial(index){
            this.selectedMaterial = this.materials[index].name
            console.log(this.selectedMaterial)
          }
export default new StateStorage();

Реактивный код ниже: 

    import React, { Component } from 'react';
        import { View, Text, FlatList, Image, ImageBackground, PixelRatio, Platform, UIManager, TouchableOpacity, LayoutAnimation } 
    from 'react-native';
        import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen'
        import DropDownItem from 'react-native-drop-down-item';
        import StateStorage from './StateStorage';
        import {observer} from 'mobx-react';

    @observer
    class App extends Component {


       constructor (props) {
    super(props)
    this.state ={


    }
    if (Platform.OS === 'android') {
      UIManager.setLayoutAnimationEnabledExperimental(true);
    }

      }


     render() {


    return (

      <View
      style={{
        backgroundColor:'#262A2C',
        flex:1
      }}>
      <FlatList
     style={{marginTop:80,}}
        data={StateStorage.materials}
        renderItem={({ item, index }) => (
       <View style={{}}>
         <TouchableOpacity
         onPress={() =>{
           StateStorage.chooseMaterial(index)
         }}>
 <ImageBackground

          source={item.image} 
        //pay FlatIcon or design personal one
          style={{ 

            resizeMode: 'contain',

          position:'relative',

          width: wp('100%'), 
          left: wp('0%'),
          borderBottomWidth: 1,
          borderBottomColor: 'grey',
          padding: hp('6%'),
          }}
        >
</ImageBackground>
 </TouchableOpacity
<TouchableOpacity activeOpacity={0.8}  
   onPress={() => {

             StateStorage.changeLayout(index)

              }} 

    style={{ padding: 10,

    backgroundColor:'black',

    left:wp('-10.9%'),
    top:hp('0%'),
    width: wp('120%'),
    height:hp('5%')}}>
   <Image
               style={{
               width:wp('9%'),
               height:hp('4.5%'),
              tintColor:'white',
              left:250,
              top:-10
               //tintColor:'#81F018'
               }}
               source={StateStorage.materials[index].expanded ? require('./Icons/arrowDown.png') : require('./Icons/arrowUp.png') }/>
</TouchableOpacity>

<View style={{height: StateStorage.materials[index].expanded ? null : 0,
      overflow: 'hidden', 
      backgroundColor:'black' }}>
            <Text 
            style={{
               fontSize: 17,
               left:150,
               top:-10,
               color: 'turquoise',
               padding: 10}}>
          Specs
            </Text>
</View>
</View>
)}
    }

      export default App

До того, как состояние было перемещено в mobx, я использовалэтот метод, чтобы заставить его работать: 

changeLayout =  ({index}) => {
        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);

     this.setState(({ materials }) => ({
        materials: materials.map((s, idx) => 
          idx === index ? {...s, expanded: !StateStorage.materials[index].expanded} : {...s, expanded: false})
      }));
      console.log(StateStorage.materials[index].expanded)



  }

1 Ответ

0 голосов
/ 20 сентября 2019

Вы ищете аккордеон:

Пожалуйста, обратитесь к нативному базовому компоненту аккордеона .Это то, что вам нужно.https://docs.nativebase.io/Components.html#accordion-def-headref

...