Question

我有一个组件调用 ButtonLayout.js

export const ButtonLayout = () => {
return (
    <View style={styles.row}>

         <TouchableOpacity >
             <Text>Book Now</Text>
         </TouchableOpacity>

         <TouchableOpacity >
             <Text>Schedule</Text>
         </TouchableOpacity>

    </View>

)
}

并且我已将此组件导入另一个名为 mapComponent 的常见组件，它看起来如下。

return (

        <View style={styles.container}>
            <MapView
                provider={MapView.PROVIDER_GOOGLE}
                style={styles.map}
                region={this.props.region}
            >
                <MapView.Marker
                    coordinate={this.props.region}
                    pinColor='green'
                />
            </MapView>

            <ButtonLayout style={{ marginBottom: 5 }} />

        </View>

    );

所以我的问题是如何处理来自 index.js 的 ButtonLayout.js 中按钮的 onPress（）功能？

Answer 1

在您的按钮Buttonlayout.js中定义如下：

     <TouchableOpacity onPress={() => this.props.onPress()}>
         <Text>Book Now</Text>
     </TouchableOpacity>

在您使用此组件的每个文件上定义onPress函数。

<ButtonLayout style={{ marginBottom: 5 }} onPress={() => {'your logic..'}}/>

Answer 2

在{ "colors": [ { "color": "black", "category": "hue", "type": "primary", "code": { "rgba": [255,255,255,1], "hex": "#000" } }, { "color": "white", "category": "value", "code": { "rgba": [0,0,0,1], "hex": "#FFF" } } ] }中定义您的回调变量，并将它们添加到您的触摸屏中。

ButtonLayout

在索引中定义回调：

export const ButtonLayout = ({ onBookPress, onSchedulePress }) => {
return (
    <View style={styles.row}>

         <TouchableOpacity onPress={onBookPress}>
             <Text>Book Now</Text>
         </TouchableOpacity>

         <TouchableOpacity onPress={onSchedulePress} >
             <Text>Schedule</Text>
         </TouchableOpacity>

    </View>

)
}

Answer 3

让你的ButtonLayout组件接受回调道具，如下所示：

export const ButtonLayout = ({onBook, onSchedule}) => (
    <View style={styles.row}>

     <TouchableOpacity onPress={onBook}>
         <Text>Book Now</Text>
     </TouchableOpacity>

     <TouchableOpacity onPress={onSchedule}>
         <Text>Schedule</Text>
     </TouchableOpacity>

</View>);

然后，将父组件的render函数中的callbacs作为props

传递

<ButtonLayout onBook={…} onSchedule={…} />

不要忘记将上下文绑定到回调

如何在一个通用组件中执行多按钮onPress功能 - React native

3 个答案: