Невозможно развернуть и закрыть складной при клике

Question

Я был на этом некоторое время, и вот что происходит. У меня есть массив в хранилище mobx, который я хотел бы отобразить в виде свертки в Flatlist в моем собственном компоненте React. Проблема здесь в том, что когда я нажимаю на нее, она меняет состояние, но действие не происходит. После некоторых исследований я нашел Accordion в NativeBase и попытался реализовать его после успешного небольшого теста. К сожалению, он не распознает индексированные значения из массива, говоря, что это не объект. Таким образом, первая проблема связана с действием закрытия и открытия сворачиваемого объекта относительно действия mobx, вторая - это аккордеон, который не может прочитать индексированные значения из массива. Если кто-то может помочь найти способ динамического свертывания для соответствующих объектов в массиве, а также отобразить значения, это было бы здорово.

Ниже приведен заинтересованный кусок кода, если вам нужно больше, пожалуйста,не стесняйтесь спрашивать, спасибо за ваше время!

файл mobx:

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

class StateStorage {



  @observable list= ['Category','','','']
  @observable selectedMaterial=''
  @observable  materials = [ 
       {

      Specs:[
        textCategory= 'Drain',
        textSpec1='Usabley',
        textSpec2='Healthy',
        textSpec3='Bio'],
        name: 'RYTT',
        price: '$',
        image: require("./Icons/Rain.jpg"),
        spec1:require("./Icons/friendly.png"),
        spec2:require("./Icons/Cutler.png"),
        spec3:require("./Icons/logout.png"),
        category:'',
        icon: '',
      uses:[
              uses1='cecec', 
              uses2='- Cans' ,
              uses3='- Jars',
              uses4='- Signages',

      pros:[
              pros1='Lightweight',
              pros2='Tough',
              pros3='xsxxs',
              pros4='cdccd',
              ],
         cons:[         
              cons1='Inflated',
              cons2='Can be sticky',
              cons3='ejhcejccjhc',
              cons4='dcd',
              cons5='dc'],
        expanded: true,
           specCount:0,
            userCount:0,
             prosCount:0,
              consCount:0,                                                            
                x:0

    },   
    {

      Specs:[
        textCategory= 'Drain',
        textSpec1='Usabley',
        textSpec2='Healthy',
        textSpec3='Bio'],
        name: 'RYTT',
        price: '$',
        image: require("./Icons/Rain.jpg"),
        spec1:require("./Icons/friendly.png"),
        spec2:require("./Icons/Cutler.png"),
        spec3:require("./Icons/logout.png"),
        category:'',
        icon: '',
      uses:[
              uses1='cecec', 
              uses2='- Cans' ,
              uses3='- Jars',
              uses4='- Signages',

      pros:[
              pros1='Lightweight',
              pros2='Tough',
              pros3='xsxxs',
              pros4='cdccd',
              ],
         cons:[         
              cons1='Inflated',
              cons2='Can be sticky',
              cons3='ejhcejccjhc',
              cons4='dcd',
              cons5='dc'],
        expanded: true,
           specCount:0,
            userCount:0,
             prosCount:0,
              consCount:0,                                                            
                x:0

    },
     {

      Specs:[
        textCategory= 'Drain',
        textSpec1='Usabley',
        textSpec2='Healthy',
        textSpec3='Bio'],
        name: 'RYTT',
        price: '$',
        image: require("./Icons/Rain.jpg"),
        spec1:require("./Icons/friendly.png"),
        spec2:require("./Icons/Cutler.png"),
        spec3:require("./Icons/logout.png"),
        category:'',
        icon: '',
      uses:[
              uses1='cecec', 
              uses2='- Cans' ,
              uses3='- Jars',
              uses4='- Signages',

      pros:[
              pros1='Lightweight',
              pros2='Tough',
              pros3='xsxxs',
              pros4='cdccd',
              ],
         cons:[         
              cons1='Inflated',
              cons2='Can be sticky',
              cons3='ejhcejccjhc',
              cons4='dcd',
              cons5='dc'],
        expanded: true,
           specCount:0,
            userCount:0,
             prosCount:0,
              consCount:0,                                                            
                x:0

    },
]

@action incrementSpecCount(){
//x=uses1 or x=pros1 oe x=cons1

for (i = 0; i < this.materials.length; i++)

{
for (n=0; n<this.materials[i].Specs.length; n++){
if(this.materials[i].Specs[n]==='')
{this.materials[i].specCount++,
this.materials[i].x=i+1}}

}

}


@action incrementUserCount(){
//x=uses1 or x=pros1 oe x=cons1

for (i = 0; i < this.materials.length; i++)

{
for (n=0; n<this.materials[i].uses.length; n++){
if(this.materials[i].uses[n]==='')
{this.materials[i].userCount++,
this.materials[i].x=i+1}}

}

}


@action incrementProsCount(){
//x=uses1 or x=pros1 oe x=cons1

for (i = 0; i < this.materials.length; i++)

{
for (n=0; n<this.materials[i].pros.length; n++){
if(this.materials[i].pros[n]==='')
{this.materials[i].prosCount++,
this.materials[i].x=i+1}}

}

}
@action incrementConsCount(){
//x=uses1 or x=pros1 oe x=cons1

for (i = 0; i < this.materials.length; i++)

{
for (n=0; n<this.materials[i].cons.length; n++){
if(this.materials[i].cons[n]==='')
{this.materials[i].consCount++,
this.materials[i].x=i+1}}

}

}

@action changeLayout(index) {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
this.materials[index].expanded= !this.materials[index].expanded
console.log(this.materials[index].expanded)
}

Реагировать на файл с настраиваемым сворачиванием (я удалил позиции стилей и другие значения, кроме отображения из-за ограничения символов)):

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';
import { Container, Header, Content, Accordion } from "native-base";


class App extends Component {

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

      }


  componentDidMount(index){
    console.log(StateStorage.materials[0].x)
    console.log(StateStorage.materials[0].prosCount)
  }





SpecViewStyle(index){

  StateStorage.incrementSpecCount()

  if(StateStorage.materials[index].specCount=== StateStorage.materials[index].x*0)

  {return {height:PixelRatio.get()<=2 && Platform.OS==='android' ? 200 : 260}}

  else if(StateStorage.materials[index].specCount=== StateStorage.materials[index].x)

  {return {height:PixelRatio.get()<=2 && Platform.OS==='android' ? 185 : 200}}

  else if(StateStorage.materials[index].specCount=== StateStorage.materials[index].x*2)

  {return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 165 : 150}}

  else if(StateStorage.materials[index].specCount=== StateStorage.materials[index].x*3)

  {return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 130 : 120}}




}



CommonUseViewStyle(index){

StateStorage.incrementUserCount()

if(StateStorage.materials[index].userCount=== StateStorage.materials[index].x*0)

{return {height:PixelRatio.get()<=2 && Platform.OS==='android' ? 200 : 190}}

else if(StateStorage.materials[index].userCount=== StateStorage.materials[index].x)

{return {height:PixelRatio.get()<=2 && Platform.OS==='android' ? 185 : 175}}

else if(StateStorage.materials[index].userCount=== StateStorage.materials[index].x*2)

{return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 165 : 150}}

else if(StateStorage.materials[index].userCount=== StateStorage.materials[index].x*3)

{return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 130 : 120}}

else if(StateStorage.materials[index].userCount=== StateStorage.materials[index].x*4)

{return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 110 : 100}}

else if(StateStorage.materials[index].userCount=== StateStorage.materials[index].x*5)

{return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 75 :65}}

else if(StateStorage.materials[index].userCount=== StateStorage.materials[index].x*6)

{return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 37.5 : 31}}

else if(StateStorage.materials[index].userCount=== StateStorage.materials[index].x*10
  || StateStorage.materials[index].userCount=== StateStorage.materials[index].x*9
  || StateStorage.materials[index].userCount=== StateStorage.materials[index].x*8
  ||StateStorage.materials[index].userCount=== StateStorage.materials[index].x*7

 )
{return {height:25}}

else {return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 167.5 : 45}}

}



ProsViewStyle(index){
  StateStorage.incrementProsCount()


  if(StateStorage.materials[index].prosCount=== StateStorage.materials[index].x*0)

{return {height:PixelRatio.get()<=2 && Platform.OS==='android' ? 200 : 190}}

else if(StateStorage.materials[index].prosCount=== StateStorage.materials[index].x)

{return {height:PixelRatio.get()<=2 && Platform.OS==='android' ? 185 : 175}}

else if(StateStorage.materials[index].prosCount=== StateStorage.materials[index].x*2)

{return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 165 : 150}}

else if(StateStorage.materials[index].prosCount=== StateStorage.materials[index].x*3)

{return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 130 : 120}}

else if(StateStorage.materials[index].prosCount=== StateStorage.materials[index].x*4)

{return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 110 : 100}}

else if(StateStorage.materials[index].prosCount=== StateStorage.materials[index].x*5)

{return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 75 :65}}

else if(StateStorage.materials[index].prosCount=== StateStorage.materials[index].x*6)

{return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 37.5 : 31}}

else if(StateStorage.materials[index].prosCount=== StateStorage.materials[index].x*8
  || StateStorage.materials[index].prosCount=== StateStorage.materials[index].x*7

 )
{return {height:25}}

  }

 ConsViewStyle(index){
    StateStorage.incrementConsCount()


    if(StateStorage.materials[index].consCount=== StateStorage.materials[index].x*0)

  {return {height:PixelRatio.get()<=2 && Platform.OS==='android' ? 200 : 190}}

  else if(StateStorage.materials[index].consCount=== StateStorage.materials[index].x)

  {return {height:PixelRatio.get()<=2 && Platform.OS==='android' ? 185 : 175}}

  else if(StateStorage.materials[index].consCount=== StateStorage.materials[index].x*2)

  {return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 165 : 150}}

  else if(StateStorage.materials[index].consCount=== StateStorage.materials[index].x*3)

  {return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 130 : 120}}

  else if(StateStorage.materials[index].consCount=== StateStorage.materials[index].x*4)

  {return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 110 : 100}}

  else if(StateStorage.materials[index].consCount=== StateStorage.materials[index].x*5)

  {return{height:PixelRatio.get()<=2 && Platform.OS==='android' ? 75 :65}}


    else {return {height:PixelRatio.get()<=2 && Platform.OS==='android' ? 200 : 190}}
 }

       render() {





    return (
      // Remain Category image and CSS
      // add search bar
      <View
      style={{
        backgroundColor:'#262A2C',
        flex:1
      }}>
      <FlatList
     style={{marginTop:80,}}
     //ListHeaderComponent=
     //if slow change initialNumToRender and count algorithm for use,pros and cons high
     /*onEndReachedThreshold={2}
     onEndReached={({ distanceFromEnd }) => {
       console.log('on end reached ', distanceFromEnd)
     }}*/
     windowSize={StateStorage.materials.length+4}
     initialNumToRender={StateStorage.materials.length}


        data={StateStorage.materials}
        renderItem={({ item, index }) => (
       <View>
         <TouchableOpacity
         onPress={() =>{
           StateStorage.chooseMaterial(index),
           console.log(StateStorage.materials[index].count),
            console.log(StateStorage.materials.length)  ,
            console.log(StateStorage.materials[0].x)




         }}>
          <ImageBackground
        // read computed                   
          source={item.image} 
        //pay FlatIcon or design personal one
          style={{ 

            resizeMode: 'cover',
           //resizeMode: 'contain,
          position:'relative',

          width: wp('100%'), 
          left: wp('0%'),
          borderBottomWidth: 1,
          borderBottomColor: 'grey',
          padding: hp('6%'),
          }}
        >
       <View
            style={{
              flex:1,
              height: null,

             width: null,


              borderBottomColor: 'grey',

            }}>


               <Image
               style={{
               width:wp('10%'),
               height:hp('5%'),
               left:wp('-10%'),
               top:hp('-5.5%'),

               }}
               source={item.spec1}/>
              <Image
               style={{
               width:wp('10%'),
               height:hp('5.5%'),
               left:wp('-10%'),
               top:hp('0%'),

               }}
               source={item.spec2}/>

               <Image
               style={{
               width:wp('10%'),
               height:hp('5.5%'),
               left:wp('-10%'),
               top:hp('6%'),

               }}
               source={item.spec3}/>

              <Text 
              style={{ fontWeight: 'bold',
               fontSize: 22, 
              left:item.name.length<=5 ? wp('32.5%'):wp('27.5%'),
               top:hp('-9.5%'),


               }}>
               {item.name}
               </Text>
              <Text
              style={{
                fontWeight: 'bold',
                fontSize: 25, 
                top: hp('-25%'),
                left:wp('80%')

              }}>
              {item.price} 
              </Text>


          </View>






   </ImageBackground>
   </TouchableOpacity>
   <TouchableOpacity activeOpacity={0.8}  
   onPress={() => {

             StateStorage.changeLayout(index)
             console.log(StateStorage.materials[index].expanded)
              }} 

    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

               }}
               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 style={this.SpecViewStyle(index)}>
            <View style={{
             display:item.Specs[0]==='' ? 'none' : 'flex',
            }} >
            <Image
             style={{
             display: item.Specs[0]==='' ? 'none' : 'flex',
            }}
              source={item.spec3}/> 
            <Text
             style={{

              display:item.Specs[0]==='' ? 'none' : 'flex',
      }}>
{item.Specs[0]}

            </Text>
            </View>
            <View style={{
              display:item.Specs[1]==='' ? 'none' : 'flex',


          }}>
             <Image

             style={{width:wp('8.5%'),
             height:PixelRatio.get()<= 2  ? hp('5.5%') : hp('4%'),
             display: item.Specs[1]==='' ? 'none' : 'flex',
             marginBottom: 15,
            tintColor:'white'}}

              source={item.spec1}/> 
            <Text
             style={{

              display: item.Specs[1]==='' ? 'none' : 'flex',
             }}>
{item.Specs[1]}
            </Text>
            </View>
            <View style={{
              display:item.Specs[2]==='' ? 'none' : 'flex',


          }}>
            <Image
             style={{
             display: item.Specs[2]==='' ? 'none' : 'flex',
          }}
              source={item.spec2}/> 
            <Text
             style={{

              display: item.Specs[2]==='' ? 'none' : 'flex',
             }}>
{item.Specs[2]}
            </Text>
            </View>
            <View style={{
              display:item.Specs[3]==='' ? 'none' : 'flex',


          }}>
            <Image

             display: item.Specs[3]==='' ? 'none' : 'flex',
             }}
              source={item.spec3}/> 
            <Text
             style={{
              ,
              display:item.Specs[3]==='' ? 'none' : 'flex',
              }}>
{item.Specs[3]}

            </Text>
        </View>
            <Image 
            //category implementation
            />

            <Text>


            </Text>
            </View>

            <Text 
            style={{
              fontSize: 17 ,
               left:125,
               top:-90,
               color: 'turquoise',
               paddingTop: PixelRatio.get()<= 2 && Platform.OS ===' android' ? 55 :65,
               paddingBottom: 10}}>
          Common uses
            </Text>
            <View style={     
              this.CommonUseViewStyle(index)


            }>

            <Text

            style=
             {{       



             }}>
{item.uses[0]}
            </Text>
            <Text
             style={{


              display:item.uses[1]==='' ? 'none' : 'flex', 

 }

               }
              >
{item.uses[1]}
            </Text>
            <Text
             style={{



              display:item.uses[2]==='' ? 'none' : 'flex',



              } }
              >
{item.uses[2]}
            </Text>
            <Text
             style={{

              display:item.uses[3]==='' ? 'none' : 'flex',



              } }
              >
{item.uses[3]}
            </Text>

            </View>

          <Text
          style={{


          }}>
Pros 
          </Text>
          <View
          style={
            this.ProsViewStyle(index)
          }>


          <Image
          style={{

            display: item.pros[0]==='' ? 'none':'flex',

          }}
          source = {require('../Icons/plus.png')}/>
          <Text
          style={{

            display: item.pros[0]==='' ? 'none':'flex',

          }}
          >
{item.pros[0]}
          </Text>

         <Image
          style={{
            display: item.pros[1]==='' ? 'none':'flex',

          source = {require('../Icons/plus.png')}/>
           <Text
          style={{

            display: item.pros[1]==='' ? 'none':'flex',


          }}>
{item.pros[1]}
          </Text>
          <Image
          style={{
            display: item.pros[2]==='' ? 'none':'flex',

          }}
          source = {require('../Icons/plus.png')}/>
           <Text
          style={{

            display: item.pros[2]==='' ? 'none':'flex',


          }}>
{item.pros[2]}
          </Text>
          <Image
          style={{
            display: item.pros[3]==='' ? 'none':'flex',

          }}
          source = {require('../Icons/plus.png')}/>
           <Text
          style={{

            display: item.pros[3]==='' ? 'none':'flex',


          }}>
{item.pros[3]}
          </Text>

            </View>

            <Text
          style={{
              fontSize: 17 ,
                left:168,
                top:-35,
                marginTop:70,
                color: 'turquoise',
                paddingTop: PixelRatio.get()<= 2 && Platform.OS ===' android' ? 55 :65,
                paddingBottom: 10



          }}>
Cons
          </Text>
            <View style={
           this. ConsViewStyle(index)


            }>
            <View
            style={{
              display:item.cons[0]==='' ? 'none' : 'flex',


          }}>
            <Image
          style={{

            display: item.cons[0]==='' ? 'none':'flex',

          }}
          source = {require('../Icons/minus.png')}/>
           <Text
          style={{

            display: item.cons[0]==='' ? 'none':'flex',

          }}
          >
{item.cons[0]}
          </Text>
          </View>
          <View
          style={{
            display:item.cons[1]==='' ? 'none' : 'flex',


        }}>
          <Image
          style={{

            display: item.cons[1]==='' ? 'none':'flex',

          }}
          source = {require('../Icons/minus.png')}/>
        <Text
          style={{
           ,
            display: item.cons[1]==='' ? 'none':'flex',


          }}>
{item.cons[1]}
          </Text>
          </View>
          <View
          style={{
            display:item.cons[2]==='' ? 'none' : 'flex',


        }}>
        <Image
          style={{

            display: item.cons[2]==='' ? 'none':'flex',

          }}
          source = {require('../Icons/minus.png')}/>
        <Text
          style={{

            display: item.cons[2]==='' ? 'none':'flex',
         10,
            left:60

          }}>
{item.cons[2]}
          </Text>
          </View>
          <View
          style={{
            display:item.cons[3]==='' ? 'none' : 'flex',


        }}>
          <Image
          style={{

            display: item.cons[3]==='' ? 'none':'flex',

          }}
          source = {require('../Icons/minus.png')}/>
        <Text
          style={{
           ,
            display: item.cons[3]==='' ? 'none':'flex',


          }}>
{item.cons[3]}
          </Text>
          </View>
          <View
          style={{
            display:item.cons[4]==='' ? 'none' : 'flex',


        }}>
          <Image
          style={{

            display: item.cons[4]==='' ? 'none':'flex',

          }}
          source = {require('../Icons/minus.png')}/>
        <Text
          style={{

            display: item.cons[4]==='' ? 'none':'flex',


          }}>
{item.cons[4]}
          </Text>
          </View>
            </View>
            </View>
          </View>  

        )}
      />
      </View>
    );
  }
}



  export default App

Для Аккордеона это тот же код, что и вместо:

он заменяется на:

<Content>
          <Accordion dataArray={StateStorage.materials} expanded={null}
          animation={true}
             renderContent={({ item, index }) => ( ..(displayed code)... )}>
            </Text>)}/>
        </Content>

Answer 1

Не уверен в своей гибкости, но я настоятельно рекомендую вам перейти на использование реактивной бумаги вместо native-base

Вы можете использовать this компонент, и я считаю, что это работает для вас.

Надеюсь, это поможет!