Zugriff auf Zustandswert von StyleSheet.create in ReactNative

Question

ich in ReactNative bin neu, und ich habe die folgenden Komponenten:

<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 den Stilen, ich habe folgendes: Ich

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}, 
      ] 
    } 
}); 

bekam ein Fehler, wenn ich auf this.state.profileImgBounceVal als außerhalb der Komponente zugreifen, die ich kenne. Gibt es einen Workaround dafür außer den Stilen innerhalb des Tags Animated.Image?

Answer 1

Sie könnten Stylesheet.flatten() verwenden, um ein wiederverwendbares Style-Objekt in Ihrer Komponente zu erstellen:

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>