在视图中渲染多个按钮以编程方式进行本地响应

Question

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

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

render(){
  return(

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

        </View>
);

}

Answer 1

在反应中，您可以轻松地收集一系列元素进行渲染。

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>
  )
}

希望那些对你有帮助。