marginTop: 15
プロパティを適用した後、ボタンの上に白い影が表示されるという問題がありました。
これはbuttonStyle
、 がインナーにスタイリングを適用しView
、エレベーション (シャドウ) がアウターに適用されるためView
、このようにして基本的にアウターに「パディング」を作成するために発生しますView
。
以下に示すように、次の方法で解決されることを期待していました。
import React, { Component } from "react";
import { View, Text, ScrollView, Dimensions } from "react-native";
import { Button } from "react-native-elements";
const SCREEN_WIDTH = Dimensions.get("window").width;
class Slides extends Component {
renderLastSlide(index) {
if (index === this.props.data.length - 1) {
return (
<Button
title="Onwards!"
raised
buttonStyle={styles.buttonStyle}
containerViewStyle={{ marginTop: 15 }}
onPress={this.props.onComplete}
/>
);
}
}
renderSlides() {
return this.props.data.map((slide, index) => {
return (
<View
key={slide.text}
style={[styles.slideStyle, { backgroundColor: slide.color }]}
>
<Text style={styles.textStyles}>{slide.text}</Text>
{this.renderLastSlide(index)}
</View>
);
});
}
render() {
return (
<ScrollView horizontal style={{ flex: 1 }} pagingEnabled>
{this.renderSlides()}
</ScrollView>
);
}
}
const styles = {
slideStyle: {
flex: 1,
justifyContent: "center",
alignItems: "center",
width: SCREEN_WIDTH
},
textStyles: {
fontSize: 30,
color: "white",
textAlign: "center"
},
buttonStyle: {
backgroundColor: "#0288D1"
}
};
export default Slides;
しかし、marginTop: 15
現在はボタンに影響を与えていません。ここで他に何をすべきかわかりません。