У меня была проблема, когда после применения свойства 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
теперь не влияет на кнопку.Я не уверен, что еще здесь делать.