访问StyleSheet.create中组件状态中定义的变量？ （未定义不是对象（评估“ this.state.filterMenuHeight”））

Question

我想为组件的入口设置动画。

所以我在组件状态下定义了一个动画变量。

但是当尝试从StyleSheet.create引用它时，得到的未定义不是对象错误。

这是我的组件代码：

我尝试用.state.filterMenuHeight替换this.state.filterMenuHeight，但仍然出现相同的错误。

但是如果变量是在外部文件中定义的，我可以访问。

import React, { Component } from 'react'
import {
    Animated,
    StyleSheet,
    Button,
    StatusBar,
    View,
    TextInput,
    Text,
    Keyboard,
    Platform,
    FlatList
} from 'react-native'
import { Icon } from 'react-native-elements'
import Modal from 'react-native-modalbox'
import Modal2 from'react-native-swipe-up-down'
import { SafeAreaView } from 'react-navigation'

import ScreenName from './ScreenName'
import ScreenNames from '../constants/ScreenNames'
import Colors from '../constants/Colors';
import FilterMenu from './FilterMenu';

export default class RequestBulletin extends Component {
    constructor(props) {
        super(props)

        this.handleScroll = this.handleScroll.bind(this)

        this.state = {
            titleFilterText: "",
            scrollOffsetY: 0,
            filterMenuHeight: new Animated.Value(0) 
        }

        this.data = [
            <View key="1" style={styles.item}/>,
            <View key="2" style={styles.item}/>,
            <View key="3" style={styles.item}/>,
            <View key="4" style={styles.item}/>,
            <View key="5" style={styles.item}/>,
            <View key="6" style={styles.item}/>,
            <View key="7" style={styles.item}/>,
            <View key="8" style={styles.item}/>,
            <View key="9" style={styles.item}/>,
            <View key="10" style={styles.item}/>, 
            <View key="11" style={styles.item}/>, 
            <View key="12" style={styles.item}/> 
        ]
    }

    handleScroll = function(event) {
        this.setState({scrollOffsetY:event.nativeEvent.contentOffset.y})
    }

    render() {
        return (
            <SafeAreaView style ={styles.container}>

                <View style={{flexDirection:'row', marginLeft:20,marginRight:20}}>
                    <TextInput 
                        style={{flex:1, height: 40, marginRight:10, borderWidth:1, borderColor: Colors.GrayAccent, borderRadius:5}} 
                        onChangeText={(titleFilterText) => this.setState({titleFilterText})}
                    />
                    <Icon 
                        type='font-awesome' 
                        name="sliders" 
                        size={25} 
                        color={Colors.GrayAccent}
                        onPress={()=> {this.refs.modal1.open()}}
                    />
                </View>

                <Text>
                    {this.state.scrollOffsetY}
                </Text>
                <ScreenName ScreenName="Bullentin"/>
                <Button
                    title = "Dashboard"
                    onPress = {() => {
                        props.navigation.navigate(ScreenNames.Dashboard, {
                            calledFrom : ScreenNames.Bulletin
                        })    
                    }}
                    style = {{width: '200'}}
                />

                <Animated.View 
                    style={styles.filterMenu}
                >
                    <FlatList
                    style= {{flex:1, width: '100%'}}
                    data= {this.data}
                    renderItem = {({item}) => item}
                    onScroll={this.handleScroll}
                    />  
                </Animated.View>

            </SafeAreaView>
        );
  }
}

let styles = StyleSheet.create({
    container: {
        paddingTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight,
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        width:'100%'

    },
    filterMenu: {
        position: 'absolute',
        backgroundColor: 'pink',
        opacity: .6,
        width: '100%',
        bottom: 40,
        height: this.state.filterMenuHeight
    },
    item: {
        height: 80,
        width:'100%',
        margin: 10,
        marginRight: 10,
        backgroundColor: 'red'
    }
})

现在我正在使用它来工作：

<Animated.View style={[styles.filterMenu, { height: this.state.filterMenuHeight }]}
>
  <FlatList
   style= {{flex:1, width: '100%'}}
   data= {this.data}
   renderItem = {({item}) => item}
   onScroll={this.handleScroll}
  />  
</Animated.View>

我知道这个问题类似于另一个问题

Accessing state value from StyleSheet.create in ReactNative

但是答案的问题在于它与我的解决方案非常相似。本质上，将2种不同的样式表压缩为一个。 如果要样式的对象数量超过1，这将很快变得效率低下。

如果没有StyleSheet.flatten（），我可以做些什么？