javascript - 行样式 React Native

Question

嘿，我是 React Native 的新手，目前我正在尝试从 API 渲染自定义单选按钮并将其制成 2x2 网格。按钮渲染成功，但它们没有渲染到 2x2 网格，我使用 push 方法制作行和列，似乎按钮没有正确传递到行和列。有什么我做错了吗？

{
    this.props.activities && this.props.activities.map((val, idx) => {
        let { id, activity, status } = val;
        let buttons = [];

        if (idx < (this.props.activities.length - 1))
            buttons.push(
                <RadioButton
                    key={id}
                    value={activity}
                    element={<Image source={img.findActivityButton(id, false)} style={{marginHorizontal: normalize(10), marginVertical: normalize(10)}} />}
                    selectedElement={<Image source={img.findActivityButton(id, true)} style={{marginHorizontal: normalize(10), marginVertical: normalize(10)}} />}
                    onPress={() => this.changeSelection(id)}
                    selected={this.state.selectedButton === id}
                />
            );                              

        var rows = [], columns = [];
        var i = 0;

        buttons.forEach((id, idx) => {
            rows.push(id);
            i++;

            if (i === 2 || idx === buttons.length - 1) {  //max buttons per row
                i = 0;
                columns.push(
                    <View key={idx} style={{ flex: 1, flexDirection: 'row' }}>
                        {rows}
                    </View>
                );
                rows = [];
                i = 0;
            }
        });

        return (
            <View style={{ flex: 1, margin: normalize(20) }}>
                {columns}
            </View>
        );
    })
}

---

更新

它实际上确实传递给了行和列，这只是样式问题，我很困惑如何设置它的样式。我敢肯定，在这需要样式的部分，有没有样式呢？

columns.push( 
<View key = { idx} style = {{flex: 1, flexDirection: 'row'}}> 
  {
    rows
  } 
  </View>
);

这是我的代码的结果

标签： javascriptcssreactjsreact-nativerow