1 
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 获取到一个函数，以便我可以适当地更改详细屏幕上的内容？

4

2 回答 2

1

你可以使用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')
          })
        ),
      ]),
  },
]);
于 2020-10-09T08:11:56.437 回答
0

您可以使用内联回调函数来实现这一点，然后使用所需的参数调用您的实际函数。

这里是。

<TapGestureHandler onHandlerStateChange={() => this.onButtonClicked(data.id)}>

或者

如果您还需要传递事件，那么更喜欢这样做

<TapGestureHandler onHandlerStateChange={(event) => this.onButtonClicked(event, data.id)}>

另请确保，您在构造函数中正确绑定此变量并调用 Animated.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>

我希望这有帮助。

于 2020-02-13T04:08:51.017 回答