В React Native (а также в React) вы можете создавать пользовательские компоненты и легко использовать их сколько угодно в своем приложении. Этим компонентам можно назначать собственные стили и значения, передавая различные значения в подпорках этих компонентов. Однако вы не можете изменить дочерние компоненты ваших пользовательских компонентов, поскольку они уже определены.
В некоторых случаях вы можете захотеть иметь контейнеры, которые выглядят одинаково, но также имеют различное содержимое и различаются по стилю. На этом этапе пользовательские компоненты контейнера входят.
Давайте создадим пользовательский контейнер с именем «BoxContainer».
JavaScript
xxxxxxxxxx
1
import React from 'react';
2
import { StyleSheet, View} from 'react-native';
3
4
const BoxContainer = props => {
5
return (
6
);
7
};
8
9
export default BoxContainer;
Мы хотим добавить стиль в наш контейнер. Стиль, который мы дадим нашему пользовательскому компоненту контейнера, будет общим стилем при каждом использовании нашего компонента. Итак, давайте изменим наш код, чтобы он возвращал представление с некоторым стилем.
JavaScript
xxxxxxxxxx
1
import React from 'react';
2
import { StyleSheet, View} from 'react-native';
3
4
const BoxContainer = props => {
5
return (
6
<View style={styles.boxContainer}>
7
</View>
8
);
9
};
10
11
const styles = StyleSheet.create({
12
boxContainer:{
13
shadowColor: '#000',
14
shadowOffset: { width: 0, height: 2 },
15
shadowOpacity: 0.8,
16
shadowRadius: 2,
17
height:200,
18
margin: 20,
19
alignItems: 'center',
20
justifyContent: 'center'
21
}
22
});
23
24
export default BoxContainer;
Вам также может понравиться:
React Native Developers: создайте свое первое приложение .
Поскольку наш компонент будет контейнером, он будет содержать различные компоненты при использовании. Нам нужно передать эти компоненты в контейнер. Это может быть достигнуто с помощью «детей» React.
JavaScript
x
1
{props.children}
Мы также хотим передать пользовательский стиль в контейнер. Как вы знаете, это можно пройти мимо props.style
. Проблема, которая здесь должна быть решена, заключается в том, что мы должны объединить общий стиль, встроенный в компонент, и стиль, передаваемый компоненту во время использования. Мы также должны позволить общему стилю перезаписываться стилем, переданным во время использования. Мы можем добиться этого с spread
оператором в JavaScript.
JavaScript
x
1
{styles.boxContainer, props.style}
С помощью spread
оператора значения стиля boxContainer
и style
объединяются и передаются в виде нового списка.
JavaScript
xxxxxxxxxx
1
import React from 'react';
2
import { StyleSheet, View} from 'react-native';
3
4
5
const BoxContainer = props => {
6
return (
7
<View style={{styles.boxContainer, props.style}}>
8
{props.children}
9
</View>
10
);
11
};
12
13
const styles = StyleSheet.create({
14
boxContainer:{
15
shadowColor: '#000',
16
shadowOffset: { width: 0, height: 2 },
17
shadowOpacity: 0.8,
18
shadowRadius: 2,
19
height:200,
20
margin: 20,
21
alignItems: 'center',
22
justifyContent: 'center'
23
}
24
});
25
26
export default BoxContainer;
Теперь наш пользовательский контейнерный компонент готов к использованию. Давайте использовать его с другим содержанием и стилем и посмотрим на результат.
JavaScript
xxxxxxxxxx
1
import React from 'react';
2
import { Button, StyleSheet, Text, View } from 'react-native';
3
import BoxContainer from './components/BoxContainer';
4
5
export default function App() {
6
return (
7
8
<View style={styles.page}>
9
<BoxContainer style={styles.container1}>
10
<Text>Box Content1</Text>
11
</BoxContainer>
12
13
<BoxContainer style={styles.container2}>
14
<Text>Box Content2</Text>
15
</BoxContainer>
16
17
<BoxContainer style={styles.container3}>
18
<View style={styles.button}>
19
<Button title='Button' color='black'/>
20
</View>
21
</BoxContainer>
22
</View>
23
);
24
};
25
26
const styles = StyleSheet.create({
27
page:{
28
flex:1,
29
paddingTop:50
30
},
31
32
container1: {
33
backgroundColor: 'yellow',
34
height : 100
35
},
36
37
container2: {
38
backgroundColor: 'red',
39
height : 100
40
},
41
42
container3: {
43
backgroundColor: 'grey',
44
height : 100
45
},
46
47
button:{
48
width:80,
49
height:40,
50
color: 'white',
51
backgroundColor: 'white'
52
}
53
});
54
И результат: