Question

我是React的初学者，我正在尝试将文件中的样式值提供给另一个文件。

这是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',
  },
});

这是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
  }
})

我想从Square.js中获取square backgroundColor的值并将其导入App.js中。

我试图用StyleSheet.flatten声明变量，但我真的不知道在哪里声明它以及如何将其赋给App.js。

谢谢您的帮助。

Answer 1

@ R.Duteil的想法正确。在这种情况下，绝对最好将样式常量保存在单独的文件中（可能在StyleSheet文件夹下），并根据需要导出/导入。另外-您提到的问题是您想将Square样式传递给App组件。对于React来说，通过许多解决方案将道具从孩子传递到父母是一个复杂的问题（他们称其为“提升状态”）。关于这个主题，有很多文章可供阅读，但是对于在组件之间传递样式特别有用。

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

1 个答案: