在React Native中基于父组件传递样式

Question

I have a <Text> component that is being passed a style so..

TextFile.js :

<Text style={styles.text}> 
  This is a line of text and this might be a second line 
</Text>

screenFile.js :

<View style={styles.viewContainer}>
    <TextFile style={styles.textWithinContainer}>
</View>

textFiles/styles.js :

text: {
    fontSize: 20,
    color: 'black',
    fontWeight: '400',
}

screenFiles/styles.js :

textWithinContainer: {
    textAlign: 'center',
}

textAlign within textWithInContainer is not being applied. If I add textAlign: 'center' to styles.text gives me the style I want but it's being used in different screens and I only want it centered in the screenFile . I want the styles from styles.textWithinContainer to override the styles in styles.text . How would I go about this?

Answer 1

You aren't delegating the styles you pass to TextFile to the actual Text element in TextFile . What you can do is add the styles together by passing an array of style objects to apply it:

<Text style={[styles.text, props.style]}> 
  This is a line of text and this might be a second line 
</Text>

From the React Native documentation :

You can also pass an array of styles - the last style in the array has precedence, so you can use this to inherit styles.

Thus, if you pass textAlign in textWithContainer , it'll be applied in the Text component, and it can be reused as you wish without textAlign .

Answer 2

In my initial TextFile, I passed style as an argument, and in the styles array, just used style as the second item in the array.

const TextFile = ({ text, style }) => (
   <Text style=([styles.text, style])> {text} </Text>
);

Whenever TextFile gets used, it will apply any styles being given within that component, and/or default to the initial styles it's being given in styles.text .

Thank you @Li357!