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

Rendering Multiple Buttons in a View react native programmatically

本文关键字：方式进 编程 本机 按钮 视图      更新时间：2023-09-26

想要基于json呈现按钮{"操作类型"：[{"字段"："按钮"，"FieldText"："否"，"FieldAction"："this.getCellNumber（'no'）"，"样式"："}{"字段"："按钮"，"FieldText"："否"，"FieldAction"："this.getCellNumber（'yes'）"，"样式"："}]}

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

render(){
  return(
        <View style={this.styles.ButtonValContainer}>
        </View>
);
}

在react中，您可以轻松地收集元素数组进行渲染。

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

希望这能有所帮助。

您可以遍历列表并在回调中返回组件。唯一的要求是返回的组件有一个key属性，React在重新提交时在内部使用该属性（这样它就知道要删除/移动/更新什么等等）

render() {
  return(
    <Wrapper>
      {items.forEach(function(item) {
        return (
          <View style={this.styles.ButtonValContainer} key={'UNIQUE_KEY_HERE'}>
            ...
          </View>
        );
      })}
    </Wrapper>
  );
}

以下是更多信息：https://facebook.github.io/react/docs/multiple-components.html

相关文章：