class InfoScreen extends Component {
constructor(props) {
super(props);
this.infoData =[
{
id:1,
title: 'React Native',
shortDescription: 'Wat is React Native en wat kan het voor u betekenen. Met React Native maken wij moderne apps op maat!',
color:'green',
},
{
id:2,
title: 'Magento 2 koppeling',
shortDescription: 'Een app met een Magento 2 koppeling is mogelijk. Link nu uw Magento 2 webshop met een moderne app!',
color:'red',
},
{
id:3,
title: 'Koppeling met API',
shortDescription: 'Wilt u data vanuit uw systeem in de app zien? Dit is zeker mogelijk zolang er bereik is via een API!',
color:'blue',
},
{
id:4,
title: 'Onze waarde',
shortDescription: 'Wat kan een React Native app voor u betekenen en hoe kunnen wij dit aan u leveren?',
color:'orange',
}
];
for(let infoData of this.infoData){
infoData.borderWidth = 10;
};
this.infoData[this.infoData.length - 1].borderWidth = 0;
this.screenOpacity = new Value(1);
this.onButtonClicked = event([
{
nativeEvent:({state})=>block([
cond(eq(state,State.END), set(this.screenOpacity, runTiming(new Clock(), 1, 0)))
])
}
]);
};
render() {
return <View style={{flex:1}}>
<Animated.View style={{opacity: this.screenOpacity}}>
<ScrollView>
{this.infoData.map((data) => {
return (
<Animated.View key={data.id} style={{...styles.InfoBlock, backgroundColor:data.color, borderBottomWidth:data.borderWidth}}>
<Text style={{...styles.textShadow, textAlign:'center',fontSize:30, color:'white', fontWeight:'bold', marginBottom:20}}>{data.title}</Text>
<Text style={{textAlign:'center',color:'white',fontSize:20, marginHorizontal: 20}}>{data.shortDescription}</Text>
<TapGestureHandler onHandlerStateChange={this.onButtonClicked}>
<Animated.View style={styles.button}>
<Text style={{fontSize: 15}}>Bekijk meer</Text>
</Animated.View>
</TapGestureHandler>
</Animated.View>
)
})}
</ScrollView>
</Animated.View>
</View>
};
}
How can I send my data.id to a custom function while also calling the react Animated.Event? I have created multiple info views and each one has a button to go to the detail page for that info view. Currently, I have no idea how to do this because the onHandlerStateChange calls a react event for animating the screen in. How can I get this data.id from the TapGestureHandler to a function so that I can change the content on the detail screen appropriately?
You could use Animated.call
this.onButtonClicked = event([
{
nativeEvent: ({ state }) =>
block([
cond(
eq(state, State.END),
set(this.screenOpacity, runTiming(new Clock(), 1, 0))
),
cond(
eq(state, State.END),
call([], () => {
console.log('Something here')
})
),
]),
},
]);
You can achieve this using a inline callback function and which inturns call your actual function with required param.
Here It is.
<TapGestureHandler onHandlerStateChange={() => this.onButtonClicked(data.id)}>
or
If you need to pass the event as well, then prefer doing this
<TapGestureHandler onHandlerStateChange={(event) => this.onButtonClicked(event, data.id)}>
Also Make sure, You bind this variable properly inside the constructor function and call Animated.event instead of just event.
class InfoScreen extends Component { constructor(props) { super(props); this.infoData =[ { id:1, title: 'React Native', shortDescription: 'Wat is React Native en wat kan het voor u betekenen. Met React Native maken wij moderne apps op maat!', color:'green', }, { id:2, title: 'Magento 2 koppeling', shortDescription: 'Een app met een Magento 2 koppeling is mogelijk. Link nu uw Magento 2 webshop met een moderne app!', color:'red', }, { id:3, title: 'Koppeling met API', shortDescription: 'Wilt u data vanuit uw systeem in de app zien? Dit is zeker mogelijk zolang er bereik is via een API!', color:'blue', }, { id:4, title: 'Onze waarde', shortDescription: 'Wat kan een React Native app voor u betekenen en hoe kunnen wij dit aan u leveren?', color:'orange', } ]; for(let infoData of this.infoData){ infoData.borderWidth = 10; }; this.infoData[this.infoData.length - 1].borderWidth = 0; this.screenOpacity = new Value(1); // Harding binding with this this.onButtonClicked = this.onButtonClicked.bind(this); }; onButtonClicked(event, id) { console.log(event, id); // try calling with animated.event since the binding is implicit to InfoScreen class Animated.event([ { nativeEvent:({state})=>block([ cond(eq(state,State.END), set(this.screenOpacity, runTiming(new Clock(), 1, 0))) ]) } ])(event); // trigger the function with event passed from the function } render() { return <View style={{flex:1}}> <Animated.View style={{opacity: this.screenOpacity}}> <ScrollView> {this.infoData.map((data) => { return ( <Animated.View key={data.id} style={{...styles.InfoBlock, backgroundColor:data.color, borderBottomWidth:data.borderWidth}}> <Text style={{...styles.textShadow, textAlign:'center',fontSize:30, color:'white', fontWeight:'bold', marginBottom:20}}>{data.title}</Text> <Text style={{textAlign:'center',color:'white',fontSize:20, marginHorizontal: 20}}>{data.shortDescription}</Text> <TapGestureHandler onHandlerStateChange={(event) =>this.onButtonClicked(event, data.id)}> <Animated.View style={styles.button}> <Text style={{fontSize: 15}}>Bekijk meer</Text> </Animated.View> </TapGestureHandler> </Animated.View> ) })} </ScrollView> </Animated.View> </View> }; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
I hope this helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.