Moim przypadkiem użycia jest pokazanie listy opcji pod wprowadzaniem tekstu, gdy ten tekst jest skupiony, na przykład autouzupełnianie Google. Problem polega na tym, że mogę pokazać/ukryć listę, ale zdarzenia dotykowe na opcjach listy nie uruchamiają się.
Kod wygląda następująco:
renderListItem({item, index}){
return <TouchableHighlight underlayColor="#e6e6e6" activeOpacity={0.5} style={[styles.rowCont]} onPress={()=>this.handleListItemPress(item)}>
<Text>{item.label}</Text>
</TouchableHighlight>
}
render() {
let listPosition = this.props.positionObj; //View prop onlayout object.
let resultDesign = this.props.visible ?
<View style={[styles.optionsCont, { top: listPosition.y + listPosition.height, left: listPosition.x }]}
onStartShouldSetResponder={(event)=>{console.log("Setting responder..."); return true}}
onResponderReject={(event)=>{console.log("The responder request is rejected.")}}
onResponderTerminate={(event)=>{console.log("The responder has been taken from the View.")}}>
<FlatList
data={this.props.listData}
renderItem={this.renderListItem}
keyExtractor={this.keyExtractor}
/>
</View>:
<View/>;
return resultDesign;
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ffffff',
},
optionsCont: {
position: "absolute",
zIndex: 2,
top: 20,
right: 20,
borderRadius: 6,
borderWidth: 1,
borderColor: "#e6e6e6",
},
rowCont: {
paddingHorizontal: 10,
paddingVertical: 10,
borderBottomWidth: 1,
borderColor: "#e6e6e6",
backgroundColor: "yellow"
},
});
Rekwizyty odpowiadające również nigdy nie odpalają. Myślę, że to dlatego, że widok początkowo nie jest renderowany. Proszę zasugerować sposób, aby to osiągnąć. Wolę nie używać biblioteki, chyba że jej wdrożenie jest zbyt czasochłonne.
1 odpowiedź
Myślę, że responder nie ustawia się z powodu
onStartShouldSetResponder={(event)=>{console.log("Setting responder..."); return true}}
Spróbuj zmienić tę linię na
onStartShouldSetResponder={()=>true}
MYŚLĘ, ale nie jestem w 100% pewien, że wywołanie tego w taki sposób, w jaki jesteś, w rzeczywistości nie wywołuje funkcji anonimowej, a zatem nie ustawia Respondera.
Można również spróbować zainicjować PanResponder i dołączyć go do widoku, gdy montuje się komponent przy użyciu konstruktora, aby obejść widok, który nie jest początkowo renderowany.
Podobne pytania
Nowe pytania
react-native
React native to biblioteka JavaScript używana do tworzenia natywnych aplikacji mobilnych przy użyciu React. React Native skupia się na wydajności programistów na wszystkich platformach, na których Ci zależy - ucz się raz, pisz gdziekolwiek.