Стили, добавленные в реагирующий нативный вид, не работают правильно?

Question

Проблема:

Я создал собственное приложение реакции, и там стили, добавленные к одному из стилей, не работают правильно.

import React, { Component } from "react";
import {
  StyleSheet,
  KeyboardAvoidingView,
  View,
  ActivityIndicator,
  TouchableOpacity,
  TextInput,
  Text,
  Image,
  ScrollView
} from "react-native";
class Finelist extends Component {
  onContentSizeChange = (contentWidth, contentHeight) => {
    // Save the content height in state
    this.setState({ screenHeight: contentHeight / 3 });
  };
  render() {
    return (
      <View style={StyleSheet.fines}>
        <View style={styles.finelistHeader}>
          <Text style={styles.finelistHeaderText}>{this.props.title}</Text>
        </View>
        <ScrollView
          contentContainerStyle={{ flexGrow: 1 }}
          onContentSizeChange={this.onContentSizeChange}
        >
          <TouchableOpacity style={styles.payButton}></TouchableOpacity>
        </ScrollView>
        <View>
          <View>
            <View style={styles.fineTitleContainer}>
              <Text style={styles.fineTitle}>None-use of seat belt</Text>
              <TouchableOpacity
                activeOpacity={1}
                style={styles.payButton}
              ></TouchableOpacity>
            </View>
          </View>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  fines: {
    flex: 1
  },
  finelistHeader: {
    backgroundColor: "#ff9a00",
    paddingLeft: 30
  },
  finelistHeaderText: {
    color: "#ffffff",
    fontWeight: "bold",
    fontSize: 14,
    marginTop: 17,
    marginBottom: 17
  },
  fineTitleContainer: {
    flex: 1,
    marginTop: 10,
    flexDirection: "row",
    backgroundColor:"#000000"
  },
  fineListContainer: {
    flex: 1
  },
  fineTitlePayContainer: {
    flex: 1,
    flexDirection: "row"
  },
  payButton: {
    backgroundColor: "#27a000"
  },
  fineTitle: {
    fontWeight: "600",
    fontSize: 14,
    letterSpacing: 0.64
  }
});
export default Finelist;

Яиспользуя его на домашней странице.

import React, { Component } from "react";

import {
  StyleSheet,
  KeyboardAvoidingView,
  View,
  ActivityIndicator,
  TouchableOpacity,
  TextInput,
  Text,
  Image,
  ScrollView
} from "react-native";

import SummuryCard from "../Shared/SummuryCard/SummuryCard";
import FineList from "../Shared/Finelist/Finelist";

import QRCode from "react-native-qrcode";

import { LinearGradient } from "expo-linear-gradient";

class Home extends Component {
  constructor(props) {
    super(props);

    this.state = {
      text: "0xC925F1698DCFB85F4F4A9235A23A7E8F"
    };
  }

  static navigationOptions = {
    header: null
  };

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.homeHeader}>
          <View style={styles.homeHeaderImage}>
            <LinearGradient
              colors={["#fdc830", "#ff9a00"]}
              style={{
                flex: 1,
                alignItems: "center",
                borderBottomLeftRadius: 80

                //   overflow: ( Platform.OS === 'ios' ) ? 'hidden' : "visible"
              }}
            >
              <View style={styles.hederContentContainer}>
                <Text style={styles.homeHederText}>Thomas Mullar</Text>
                <Image
                  source={require("../../../assets/user.png")}
                  style={styles.image}
                ></Image>
              </View>
            </LinearGradient>
          </View>
        </View>
        <View style={styles.qrCodeGeneraterContainer}>
          <QRCode
            value={this.state.text}
            size={150}
            bgColor="black"
            fgColor="white"
            fontWeight="600"
          />
        </View>
        <Text style={styles.viewDetails}>View Details</Text>
        <SummuryCard></SummuryCard>
        <FineList title="Pending Fines"></FineList>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    top: 0,
    flex: 3
  },
  homeHeader: {
    flexDirection: "column",
    flex: 1
  },
  homeHeaderImage: {
    flexDirection: "row"
  },
  homeHederText: {
    fontSize: 18,
    fontWeight: "bold",
    fontStyle: "normal",
    fontFamily: "sans-serif",
    letterSpacing: 0.81,
    color: "#000104",
    marginTop: "2%",
    marginLeft: "40%",
    marginRight: "3%"
  },
  hederContentContainer: {
    flexDirection: "row",
    marginTop: "10%",
    marginBottom: "10%"
  },
  qrCodeGeneraterContainer: {
    alignItems: "center",
    justifyContent: "center"
  },
  viewDetails: {
    color: "#ff9a00",
    fontSize: 12,
    marginLeft: "79%",
    fontWeight: "bold",
    marginTop: "5%",
    marginBottom: "3%"
  }
});

export default Home;

Но стилизация, добавленная ко всем представлениям после fineTitleContainer, работает неправильно.

Здесь я сталкиваюсь с проблемой.

<View>
              <View>
                <View style={styles.fineTitleContainer}>
                  <Text style={styles.fineTitle}>None-use of seat belt</Text>
                  <TouchableOpacity
                    activeOpacity={1}
                    style={styles.payButton}
                  ></TouchableOpacity>
                </View>
              </View>
            </View>

Так может кто-нибудь помочь мне решить эту проблему. Я много пытался найти решение этой проблемы, но я не смог этого сделать. Спасибо!

Answer 1

вы должны изменить

 <View style={StyleSheet.fines}>

на

 <View style={styles.fines}>