点击时无法展开和关闭可折叠

问题描述 投票：0回答：1

我已经进行了一段时间，这是怎么回事。我在mobx存储中有一个数组，希望在React本机组件的Flatlist中以可折叠的视图显示。这里的问题是，当我单击它时，它确实会更改状态，但不会执行操作。经过一番研究，我在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>

我已经进行了一段时间，这是怎么回事。我在mobx存储中有一个数组，希望在React本机组件的Flatlist中以可折叠的视图显示。 ...

react-native accordion react-native-flatlist mobx-react collapsable
1个回答
0
投票

不确定您的灵活性，但我强烈建议您切换为使用react-native-paper而不是native-base

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.