我的按钮没有在我的容器上传播

时间:2018-05-31 11:09:53

标签: react-native flexbox scrollview container-view

我试图以这种方式设置我的按钮样式,它将分布在我的视图中。目前,它在我的按钮的左侧和底部创建了白色边框(参见附页截图)。

enter image description here

我的代码:

let {width, height} = Dimensions.get('window');
        let photoWidth = width/4;

return (
            <View style={{width: width, height: 500}}>
                <ScrollView style={{width: width, height: height}}>
                    <View style={{flexDirection: 'row', width: width, flexWrap: 'wrap'}}>
                    {
                        this.state.photos.map((p, i) => {
                            return (
                                <SelectedPhoto
                                    key={i}
                                    index={i}
                                    style={{
                                        width: photoWidth,
                                        height: photoWidth,
                                    }}
                                    limit={this.state.supportLength}
                                    photo={p}
                                    onSelectPhoto={this.onSelectPhoto}
                                    onDeselectPhoto={this.onDeselectPhoto}
                                />
                            );
                        })
                    }
                    </View>
                </ScrollView>
                <View style={{ flexDirection:"row", flexWrap: 'wrap', width: width }}>
                    <Button

                        onPress={this.onNext}  
                        containerViewStyle={{width: width}}
                        backgroundColor={Colors.red}
                        title='NEXT' />
                </View>             
            </View>
        );

1 个答案:

答案 0 :(得分:0)

我考虑使用Button中使用的react-native组件。只需删除您在设置width时添加的包装器。

<Button
   onPress={this.onNext}  
   containerViewStyle={{width: width}}
   backgroundColor={Colors.red}
   title='NEXT' />