react-native的触摸事件应该如何动态生成?
使用RN开发APP,按照一般的思路,比如我们在动态生成一个文章列表,然后当用户点击(TouchableHighlight)文章标题的时候,需要显示文章详情,此时需要在生成的每个列表上添加一个触摸事件,类似如下:
一行标题: class Title extends Component{ _onPress(){ Alert.alert('test','test'); } render(){ return( <TouchableHighlight onPress={() => this.onPress() } > <Text>{this.props.name}</Text> </TouchableHighlight> ) } } 标题列表循环显示: { article_array.map( (name)=>( <Title name={name} /> ) ) }
在我们使用redux框架的时候,一般要求组件和逻辑分离的做法,此时最好把处理方法,当成属性传递过来:
此时,不妨我们换一种写法,把要触发的方法,传递到要生成的组件中,作为组件的一个属性去调用,而不是把触发方法,写到子组件内部。
一个标题: class Title extends Component{ render(){ return( <TouchableHighlight onPress={() => this.props.onPress() } > <Text>{this.props.name}</Text> </TouchableHighlight> ) } } 标题列表循环显示:
export default class NewTest extends Component {
_onPress(){
Alert.alert('test','test');
}
render(){
{
article_array.map( (name)=>( <Title name={name} onPress={this._onPress} /> ) )
}
}
}
这回,我们在刷新的时候,发现正常了。
假如要动态生成的组件列表中包含事件,那么要把事件处理方法,当成组件属性,传递过来。
浙公网安备 33010602011771号