javascript - React Native TapGestureHandler - 如何调用函数并发送自定义 id 参数
问题描述
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>
};
}
如何在调用 react Animated.Event 的同时将我的 data.id 发送到自定义函数?我创建了多个信息视图,每个视图都有一个按钮可以转到该信息视图的详细信息页面。目前,我不知道如何执行此操作,因为 onHandlerStateChange 调用了一个反应事件来为屏幕设置动画。如何将这个 data.id 从 TapGestureHandler 获取到一个函数,以便我可以适当地更改详细屏幕上的内容?
解决方案
你可以使用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')
})
),
]),
},
]);
推荐阅读
- proxy - 无法使用 @vue/test-utils 在 Vue 中运行 Hello World 测试
- java - 如何在我的迷你库程序中获得没有 NullPointerException 的 else 语句?
- python - (Allauth) 重新发送验证重定向到另一个页面
- javascript - 使用 react 在 firebase 中使用 post 函数时出错
- django - 如何在 django rest api 中登录我的多用户类型
- mongodb - mongotemplate中大小数的条件查询
- node.js - 中间件不在快速路由器中执行
- javascript - 如何访问函数外部的变量?节点
- express - 护照本地策略我如何在我的快速申请中进行测试
- flutter - 我如何解决未来
,将其转换为 File,并确保它在 runApp 启动之前可用?