从StyleSheet.create访问状态值ReactNative

Question

我在ReactNative新的，我有以下组成部分：

<View style={{flex: 1}}> 
    <View style={styles.container}> 
     <Animated.Image style= {styles.photo} 
       source={{uri: this.props.user.picture.large}}/> 
    </View> 
    <View style={{backgroundColor:'whitesmoke', flex: 1}}></View> 
    </View> 

在风格，我有以下几点：

const styles = StyleSheet.create({ 
    container: { 
    flex: 0.5, 
    backgroundColor: '#4dbce9', 
    alignItems: 'center', 
}, 
photo: { 
    height: 150, 
    width: 150, 
    borderRadius: 75, 
    borderWidth: 3, 
    borderColor: 'white', 
    transform: [      // `transform` is an ordered array 
      {scale: this.state.profileImgBounceVal}, 
      ] 
    } 
}); 

我当我访问this.state.profileImgBounceVal作为我知道的组件之外的错误。除了包含Animated.Image标签中的样式外，是否有任何解决方法？

Answer 1

你可以使用Stylesheet.flatten()建立在你的组件可重复使用的样式对象：

var animatedImageStyle = StyleSheet.flatten([ 
    styles.photo, 
    { 
    transform: [{scale:this.state.profileImgBounceVal}] 
    } 
]) 

<View style={{flex: 1}}> 
    <View style={styles.container}> 
    <Animated.Image style={animatedImageStyle} 
      source={{uri: this.props.user.picture.large}}/> 
    </View> 
    <View style={{backgroundColor:'whitesmoke', flex: 1}}></View> 
</View>