Question

在根据其当前状态单击它们时，我试图在Flatlist中扩大或缩小视图。我在mobx中使用数据并将其连接到react组件。即使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)



  }

Answer 1

您正在搜索手风琴：

请参阅native base accordion component。这就是你所需要的。 https://docs.nativebase.io/Components.html#accordion-def-headref

尝试根据其当前状态在“平面列表”中单击时扩大或缩小视图

1 个答案: