Estoy trabajando en Text Scaling en el que quiero escalar el texto pero manteniendo la posición x. Ahora, estoy escalando el texto pero pierde su posición actual. ¿Puede alguien ayudarme con eso?
<Animated.View style={{ transform: [{ translateY: transText }] }}> <Animated.View onLayout={({ nativeEvent: { layout: { width, height } } }) => { label.current = { width, height }; }} style={{ width: width - (width / 3), transform: [{ scale: textScale }, { translateX: labelTransX }, { translateY: labelTransY }], justifyContent: 'flex-end' }}> <TouchableWithoutFeedback onPress={handleMenu}> <View style={{ flexDirection: 'row', alignItems: 'center' }}> <View> <Animated.Text style={{ color: isDarkMode ? colors.TextBodyL : 'black', fontSize: 28, fontWeight: 'bold' }} numberOfLines={1}> {mainLabel} </Animated.Text> </View> <Animated.View style={{ transform: [{ rotate: rotate.interpolate({ inputRange: [0, 180], outputRange: ['0deg', '180deg'], extrapolate: 'extend' }) }] }}> <Icon name={'caret-down-outline'} size={20} color={isDarkMode ? colors.TextBodyL : 'black'} /> </Animated.View> </View> </TouchableWithoutFeedback> </Animated.View> <Animated.View style={{ transform: [{ translateY: labelTransY }] }}> <Text style={{ color: isDarkMode ? colors.TextBodyL : colors.TextBodyD }}> {notesState.length} notes </Text> </Animated.View> </Animated.View>Este código anterior de alguna manera mantiene el texto para mantener su posición pero no demasiado preciso.
Hay un par de opciones.
Fácil: Pon tu texto en un contenedor con justifyContent: 'center', alignItems: 'center'
Más molesto: agregue marginTop y marginLeft negativos a sus propiedades de texto animado, pero multiplique esa cantidad por el cambio en fontSize , multiplicado por PixelRatio/fontScale.
Esperemos que la primera opción te funcione; si no, avíseme si necesita más información sobre el segundo.