React 本机 onStartShouldSetResponder 参数不适用于 AutoCompeletInput 插件
React native onStartShouldSetResponder parameter not working for AutoCompeletInput plugin
我正在使用自动完成输入插件。 我已将此组件放在 Scrollview 中。它的其他行为很好,例如使用我们的自定义设计在弹出窗口中显示建议列表。
推荐的插件:- Plugin
但是 onStartShouldSetResponder{()=>true} 不工作。
因此我无法滚动我的建议列表。
这是我实现的代码=>
<ScrollView keyboardShouldPersistTaps='always' style={[commonstyles.mainContainer,styles.mainContainer,{marginBottom:20}]}>
<View style={{width:width-30,height:45}}>
<Autocomplete
autoCapitalize="none"
autoCorrect={false}
hideResults={false}
containerStyle={{flex: 1,left: 10,position: 'absolute',right: 10,top: 0,zIndex: 1}}
data={films.length === 1 && comp(query, films[0].name) ? [] : films}
defaultValue={query}
onChangeText={text => this.setState({ query: text })}
placeholder="Select Contact"
renderItem={({ id,name }) => (
<TouchableOpacity onStartShouldSetResponder={()=>{return true;}} activeOpacity={1} onPress={() => this.setState({ query: name })}>
<Text style={{fontSize:Global.DESCRIPTION_FONT_SIZE,color:Global.APP_BLACK_COLOR,borderBottomWidth:0.5,borderColor:Global.APP_BLACK_COLOR,padding:5}}>
{id} {name}
</Text>
</TouchableOpacity>
)}
/>
</View>
</Scrollview>
- 如果我做错了什么,请告诉我。
- 我也无法理解 onStartShouldSetResponder() 函数的实现。
- 建议 React Native 中的自动完成输入示例,其工作方式类似于 Android AutoCompleteTexview 组件。
将 scrollEnabled 参数添加到您的滚动视图。
试试下面的代码
<ScrollView scrollEnabled={this.state.enableScrollViewScroll} keyboardShouldPersistTaps='always' style={[commonstyles.mainContainer,styles.mainContainer,{marginBottom:20}]}>
<View style={{width:width-30,height:45}}>
<Autocomplete
autoCapitalize="none"
autoCorrect={false}
hideResults={false}
onStartShouldSetResponderCapture={() => {
var self=this;
this.setState({ enableScrollViewScroll: false });
console.log("Here==>",self.state.enableScrollViewScroll);
}}
containerStyle={{flex: 1,left: 10,position: 'absolute',right: 10,top: 0,zIndex: 1}}
data={films.length === 1 && comp(query, films[0].name) ? [] : films}
defaultValue={query}
onChangeText={text => this.setState({ query: text })}
placeholder="Select Contact"
renderItem={({ id,name }) => (
<TouchableOpacity activeOpacity={1} onPress={() => this.setState({ query: name,enableScrollViewScroll:true })}>
<Text style= {{fontSize:Global.DESCRIPTION_FONT_SIZE,color:Global.APP_BLACK_COLOR,borderBottomWidth:0.5,borderColor:Global.APP_BLACK_COLOR,padding:5}}>
{id} {name}
</Text>
</TouchableOpacity>
)}
/>
</View>
</Scrollview>
我正在使用自动完成输入插件。 我已将此组件放在 Scrollview 中。它的其他行为很好,例如使用我们的自定义设计在弹出窗口中显示建议列表。
推荐的插件:- Plugin
但是 onStartShouldSetResponder{()=>true} 不工作。 因此我无法滚动我的建议列表。
这是我实现的代码=>
<ScrollView keyboardShouldPersistTaps='always' style={[commonstyles.mainContainer,styles.mainContainer,{marginBottom:20}]}>
<View style={{width:width-30,height:45}}>
<Autocomplete
autoCapitalize="none"
autoCorrect={false}
hideResults={false}
containerStyle={{flex: 1,left: 10,position: 'absolute',right: 10,top: 0,zIndex: 1}}
data={films.length === 1 && comp(query, films[0].name) ? [] : films}
defaultValue={query}
onChangeText={text => this.setState({ query: text })}
placeholder="Select Contact"
renderItem={({ id,name }) => (
<TouchableOpacity onStartShouldSetResponder={()=>{return true;}} activeOpacity={1} onPress={() => this.setState({ query: name })}>
<Text style={{fontSize:Global.DESCRIPTION_FONT_SIZE,color:Global.APP_BLACK_COLOR,borderBottomWidth:0.5,borderColor:Global.APP_BLACK_COLOR,padding:5}}>
{id} {name}
</Text>
</TouchableOpacity>
)}
/>
</View>
</Scrollview>
- 如果我做错了什么,请告诉我。
- 我也无法理解 onStartShouldSetResponder() 函数的实现。
- 建议 React Native 中的自动完成输入示例,其工作方式类似于 Android AutoCompleteTexview 组件。
将 scrollEnabled 参数添加到您的滚动视图。
试试下面的代码
<ScrollView scrollEnabled={this.state.enableScrollViewScroll} keyboardShouldPersistTaps='always' style={[commonstyles.mainContainer,styles.mainContainer,{marginBottom:20}]}>
<View style={{width:width-30,height:45}}>
<Autocomplete
autoCapitalize="none"
autoCorrect={false}
hideResults={false}
onStartShouldSetResponderCapture={() => {
var self=this;
this.setState({ enableScrollViewScroll: false });
console.log("Here==>",self.state.enableScrollViewScroll);
}}
containerStyle={{flex: 1,left: 10,position: 'absolute',right: 10,top: 0,zIndex: 1}}
data={films.length === 1 && comp(query, films[0].name) ? [] : films}
defaultValue={query}
onChangeText={text => this.setState({ query: text })}
placeholder="Select Contact"
renderItem={({ id,name }) => (
<TouchableOpacity activeOpacity={1} onPress={() => this.setState({ query: name,enableScrollViewScroll:true })}>
<Text style= {{fontSize:Global.DESCRIPTION_FONT_SIZE,color:Global.APP_BLACK_COLOR,borderBottomWidth:0.5,borderColor:Global.APP_BLACK_COLOR,padding:5}}>
{id} {name}
</Text>
</TouchableOpacity>
)}
/>
</View>
</Scrollview>