reagieren nativen berührbare highlight und greifbar native feedback für meine Menü-Elemente
Ich versuche zu realisieren eine grundlegende Schublade, aber ich bin verwirrt durch die Dokumentation.
Es ist ein TouchableHighlight, und es ist ein TouchableNativeFeedback.
TouchableNativeFeedback ist nur für Android. Also, wie kann ich am besten mit meinen MenuItem Komponente, so kümmert es sowohl für Android und IOS?
Hier ist, was ich habe, so weit, und ich bin mir nicht sicher, wie man mit den verschiedenen Plattform-spezifische berührbare Sachen hier:
import React, { Component, PropTypes } from 'react';
import { TouchableHighlight, TouchableNativeFeedback, Platform, View, Text } from 'react-native';
export class MenuItem extends Component {
handleAndroid() {
}
handleIOS() {
}
renderMenuItem() {
return (
<View style={styles.container}>
<Text style={styles.text}>
{this.props.text}
</Text>
</View>
);
}
render() {
return (
);
}
}
Auf Android, muss ich TouchableNativeFeedback nur?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wie Sie sagte:
TouchableNativeFeedback
ist Android nur deshalb funktioniert es nicht für iOS. Wenn Sie möchten, eine Lösung, die funktioniert für beide verwendenTouchableHighlight
und style es entsprechend. Zum Beispiel, seineunderlayColor
prop ermöglicht Ihnen das festlegen "die Farbe der Unterlage, die Ihnen zeigen, durch, wenn der Touchscreen aktiv ist."EDIT:
Wenn Sie verwenden möchten
TouchableNativeFeedback
für Android undTouchableHighlight
für iOS, sollten Sie etwas wie die folgende:EDIT 2:
Alternativ können Sie eine benutzerdefinierte Komponente erstellen, die für jede Plattform und verwenden Sie den Datei-Erweiterungen. Zum Beispiel:
Diese beiden in den gleichen Ordner, und verwenden Sie dann
MyButton
als reguläre Komponente:Dies ist durchaus ordentlich, wenn Sie möchten, verwenden Sie diese Komponente in mehreren Orten, weil Sie nicht füllen Sie Ihren code mit if-else-Blöcke.
Lesen Sie hier mehr über Plattform-Spezifische Code.
Lösen können Sie dieses in eine elegantere Art und Weise, wie diese:
Ich habe mit diesem erfolgreich, und ich kann nicht einen Grund sehen, es nicht funktionieren würde, es sieht gut aus für mich.
Oder Sie können eine benutzerdefinierte Komponente erstellen, wie diese:
Und dann verwenden Sie es wie diese: