在React Native中将样式值从文件传递到另一个

Question

I am a beginner in react and I am trying to give a style value from a file to another.

This is Square.js :

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Numbers from './Numbers';

export default class Square extends React.Component {
    render() {
      return (
        <View style={squareStyles.square}>
          <Numbers number={this.props.squareNumber}></Numbers>
        </View>
      );
  }
}

const squareStyles = StyleSheet.create({
  square: {
    width: 100,
    height: 100,
    flex: 1,
    backgroundColor: 'skyblue',
    borderWidth: 3,
    borderColor: 'black',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

This is App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Square from './Square';

export default class App extends React.Component {
  render() {
    let flexDirection = StyleSheet.flatten(styles.image).flexDirection;
    return (
      <View>
        <Text style={styles.title}>{flexDirection}</Text>
        <View style={styles.imageContainer}>
            <Text style={styles.flexboxTitle}>flexbox</Text>
            <View style={styles.image}>
              <Square squareNumber='1'></Square>
              <Square squareNumber='2'></Square>
              <Square squareNumber='3'></Square>
            </View>
        </View>
      </View>
    );
  }
}

function ucFirst(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}

const styles = StyleSheet.create({
  title: {
    alignItems: 'center',
    textAlign: 'center',
    fontWeight : 'bold',
    fontSize: 20,
    marginTop: 30
  },
  imageContainer : {
    alignItems: 'center',
    marginTop: 30,
    marginRight: 20,
    marginLeft: 20,
    padding: 20,
    borderWidth: 4,
    borderColor: 'black',
    height: 400
  },
  flexboxTitle : {
    marginBottom: 20
  },
  image : {
    flex: 1,
    flexDirection : 'row',
    height: 800,
    paddingTop : 80
  }
})

I would like to get the value of square backgroundColor from Square.js and import it in App.js.

I tried to declare variable with StyleSheet.flatten but I don't really know where to declare it and how to give it to App.js.

Thank you for your help.

Answer 1

@R.Duteil has the right idea. In this case it's definitely best to keep your style const in a seperate file (maybe under a StyleSheet folder) and export/import as needed. Also - your question mentioned you wanted to pass Square styles to App component. Passing props from child to parent is a complicated question with React with many solutions (they call it "lifting state up"). There's much to read on this topic, but none are particularly useful for passing styles around components.