在视图中呈现多个按钮以编程方式进行本机反应 [英] Rendering Multiple Buttons in a View react native programmatically

问题描述

想要渲染按钮基于json
{
ActionType：[{
Field：Button，
FieldText：No，
FieldAction：this.getCellNumber（'no'），
style：
}，{
Field：Button，
FieldText：No，
FieldAction：this.getCellNumber（'yes'），
style：
}]
}

Want to render buttons Based upon the json { "ActionType" : [{ "Field" : "Button", "FieldText" : "No", "FieldAction" : "this.getCellNumber('no')", "style":"" },{ "Field" : "Button", "FieldText" : "No", "FieldAction" : "this.getCellNumber('yes')", "style":"" }] }

如何在渲染函数中循环它以获得视图中的按钮数量

How can I loop it in a render function to get number of buttons in a view

render(){
  return(

        <View style={this.styles.ButtonValContainer}>

        </View>
);

}

推荐答案

in react你可以轻松地收集一系列元素进行渲染。

in react you can easily collect an array of elements for rendering.

const buttons = [
    {
      text: 'button one',
      action: () => console.log('pressed button one'),
    }, 
    {
      text: 'button two',
      action: () => console.log('pressed button two')            
    }
];

....

// react class definition

// ...
// assuming `Button` is a defined class in scope.

render() {
  const renderedButtons =  buttons.map(b => {
    return <Button key={b.text} text={b.text} onPress={b.action} />;
  });

  return (
    <View>
     {renderedButtons}
    </View>
  )
}

希望有所帮助。

这篇关于在视图中呈现多个按钮以编程方式进行本机反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！