javascript - icon - react native button style
React Native: anima el encabezado de contracción con pestañas (2)
Puede lograr esto controlando las acciones de desplazamiento animadas usted mismo usando el componente RN-Animated . Esto no es exactamente lo que pediste, pero se puede jugar fácilmente para obtener los resultados correctos y realmente solo necesitas usar el método renderScrollComponent de cualquier vista de lista para capturar lo mismo ... así que ... Aquí hay un código :
El código
constructor(props) {
super(props);
this.headerHeight = 150;
this.state = {
scrollY: new Animated.Value(0),
};
}
render() {
return (
<View style={[
styles.container,
{
width: this.props.display.width,
height: this.props.display.height,
}
]}>
{ this.renderScrollView() }
{ this.renderListHeader() }
</View>
);
}
renderListHeader() {
return (
<Animated.View
style={[
styles.headerContainer,
{
width: this.props.display.width,
height: this.state.scrollY.interpolate({
inputRange: [0, this.headerHeight],
outputRange: [this.headerHeight, this.headerHeight / 2],
extrapolate: ''clamp'',
}),
}
]}>
<Text style={[bodyFontStyle, styles.testingText]}>
I am a test!
</Text>
</Animated.View>
);
}
renderScrollView() {
return (
<Animated.ScrollView
bounces={false}
scrollEventThrottle={1}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
onScroll={Animated.event( [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }] )}>
<Animated.View
style={[
styles.innerScrollContainer,
{
height: 800,
width: this.props.display.width,
marginTop: this.headerHeight,
}
]}>
<Text style={[bodyFontStyle, styles.innerContainerText]}>
Look ma! No Hands!
</Text>
</Animated.View>
</Animated.ScrollView>
);
}
const styles = StyleSheet.create({
container: {
position: ''relative'',
backgroundColor: ''transparent'',
},
headerContainer: {
position: ''absolute'',
top: 0, left: 0,
overflow: ''hidden'',
backgroundColor: ''green'',
},
innerScrollContainer: {
position: ''relative'',
backgroundColor: ''white'',
},
innerContainerText: { color: ''black'' },
testingText: { color: ''black'' },
});
Estoy seguro de que entiendes lo que este código intenta hacer ... pero solo en caso de que haya un colapso.
Desglose de código
Utilizo los apoyos this.props.display.width / height para enviar el ancho / alto del nivel del sistema del ancho / alto de la pantalla actual del dispositivo, pero si prefieres el uso flexible, en su lugar.
No necesita necesariamente un tamaño de encabezado estático o codificado, solo un lugar central (es decir, nivel de clase o nivel de módulo JS) para usarlo en su código de clase.
Por último, solo porque haya interpolado los datos de desplazamiento a la altura del cuadro, no significa que deba hacerlo. En el ejemplo que muestra, parece más como si quisiera traducir la caja hacia arriba en lugar de reducir su altura.
Gol
Im tratando de crear una vista con un encabezado animado que se encoge con una pestaña que contiene pestañas con contenido desplazable. Ver imagen.
Preparar
Estoy usando reaccionar-navegación con un TabNavigator. El encabezado es un componente con una altura fija, actualmente arriba del TabNavigator. El encabezado se fija por encima de las pestañas todo el tiempo teniendo un espacio precioso.
Enfoques probados
He intentado con Janic Duplessis Blog Post, pero no puedo hacerlo funcionar debido a las pestañas.
También traté de implementarlo con dos ScrollView / FlatList: uno envuelto alrededor de toda la vista y otro envolviendo el contenido, pero no puedo reaccionar como nativo para propagar el borde de desplazamiento.
El efecto deseado es el mismo que en la tienda de Google Play.
