从 ReactNative 中的 StyleSheet.create 访问状态值 [英] Accessing state value from StyleSheet.create in ReactNative

问题描述

我是 ReactNative 的新手，我有以下组件:

I'm new in ReactNative and I have the following components:

  <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>

在样式中，我有以下内容:

In the styles, I have the following:

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 标签中包含样式外，是否有任何解决方法?

I got an error when I access this.state.profileImgBounceVal as its outside the component I know. Is there any workaround for this except including the styles inside the Animated.Image tag?

推荐答案

你可以使用 Stylesheet.flatten() 在你的组件中创建一个可重用的样式对象:

You could use Stylesheet.flatten() to create a reusable style object in your component:

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>

这篇关于从 ReactNative 中的 StyleSheet.create 访问状态值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！