реагировать на собственные элементы, поле кнопки не действует

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


react-native react-native-elements
person Daniel    schedule 08.05.2019    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете попробовать View

<View style={{marginTop: 15}}}>
  <Button
          title="Onwards!"
          raised
          buttonStyle={styles.buttonStyle}
          onPress={this.props.onComplete}
        />
<View>
person hong developer    schedule 08.05.2019

arrow_upward
0
arrow_downward

Вместо использования стиля для применения стиля к компоненту React Native Elements используйте containerStyle.

Вот ссылка на документацию, где это указано:

https://reactnativeelements.com/docs/customization/

Пример:

        // A React Native Elements button
        <Button
            containerStyle={styles.button} // apply styles calling "containerStyle"
            title="Sign up"
        />

       // On the StyleSheet:
       const styles = StyleSheet.create({
        
         button: {
           color: '#C830CC',
           margin: 10,
         },
    
       });
person pablohs1986    schedule 11.04.2021