الفرق بين المراجعتين ل"ReactNative/activityindicator"
اذهب إلى التنقل
اذهب إلى البحث
(←color) |
Basema-bakleh (نقاش | مساهمات) (←مثال) |
||
سطر 3: | سطر 3: | ||
==مثال== | ==مثال== | ||
+ | |||
+ | * مثال لمكون الصنف (Class Component) | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
− | import React, { Component } from | + | import React, { Component } from "react"; |
− | import { | + | import { ActivityIndicator, StyleSheet, Text, View } from "react-native"; |
− | |||
− | |||
− | |||
− | |||
− | |||
− | } from | ||
− | + | class App extends Component { | |
render() { | render() { | ||
return ( | return ( | ||
<View style={[styles.container, styles.horizontal]}> | <View style={[styles.container, styles.horizontal]}> | ||
− | <ActivityIndicator | + | <ActivityIndicator /> |
− | <ActivityIndicator size=" | + | <ActivityIndicator size="large" /> |
− | <ActivityIndicator size=" | + | <ActivityIndicator size="small" color="#0000ff" /> |
− | <ActivityIndicator size=" | + | <ActivityIndicator size="large" color="#00ff00" /> |
</View> | </View> | ||
− | ) | + | ); |
} | } | ||
} | } | ||
سطر 29: | سطر 25: | ||
container: { | container: { | ||
flex: 1, | flex: 1, | ||
− | justifyContent: | + | justifyContent: "center" |
+ | }, | ||
+ | horizontal: { | ||
+ | flexDirection: "row", | ||
+ | justifyContent: "space-around", | ||
+ | padding: 10 | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | export default App; | ||
+ | </syntaxhighlight> | ||
+ | |||
+ | * مثال لمكون الدالة (Function Component) | ||
+ | <syntaxhighlight lang="javascript"> | ||
+ | import React from "react"; | ||
+ | import { ActivityIndicator, StyleSheet, Text, View } from "react-native"; | ||
+ | |||
+ | const App = () => ( | ||
+ | <View style={[styles.container, styles.horizontal]}> | ||
+ | <ActivityIndicator /> | ||
+ | <ActivityIndicator size="large" /> | ||
+ | <ActivityIndicator size="small" color="#0000ff" /> | ||
+ | <ActivityIndicator size="large" color="#00ff00" /> | ||
+ | </View> | ||
+ | ); | ||
+ | |||
+ | const styles = StyleSheet.create({ | ||
+ | container: { | ||
+ | flex: 1, | ||
+ | justifyContent: "center" | ||
}, | }, | ||
horizontal: { | horizontal: { | ||
− | flexDirection: | + | flexDirection: "row", |
− | justifyContent: | + | justifyContent: "space-around", |
padding: 10 | padding: 10 | ||
} | } | ||
− | }) | + | }); |
− | + | export default App; | |
</syntaxhighlight> | </syntaxhighlight> | ||
+ | |||
== الخاصيات == | == الخاصيات == | ||
* [[ReactNative/view|خاصيّات <code>View</code>]] | * [[ReactNative/view|خاصيّات <code>View</code>]] | ||
سطر 48: | سطر 74: | ||
===<code>animating</code>=== | ===<code>animating</code>=== | ||
− | إظهار المؤشر ( | + | إظهار المؤشر (true) أو إخفاؤه (false). |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!مطلوب | !مطلوب | ||
+ | !القيمة الافتراضية | ||
|- | |- | ||
|قيمة منطقيّة | |قيمة منطقيّة | ||
|لا | |لا | ||
+ | |true | ||
|} | |} | ||
===<code>color</code>=== | ===<code>color</code>=== | ||
− | لون المؤشّر | + | لون المؤشّر . |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!مطلوب | !مطلوب | ||
+ | !القيمة الافتراضية | ||
|- | |- | ||
|[[ReactNative/colors|color]] | |[[ReactNative/colors|color]] | ||
|لا | |لا | ||
+ | |<code>الرمادي '#999999'</code> على نظام التشغيل iOS | ||
+ | |||
+ | <code>null</code> (اللون الافتراضي للنظام) في نظام Android | ||
|} | |} | ||
===<code>hidesWhenStopped</code>=== | ===<code>hidesWhenStopped</code>=== | ||
− | ما إذا كان يجب إخفاء المؤشر عند عدم تحريكه (animating | + | ما إذا كان يجب إخفاء المؤشر عند عدم تحريكه (animating). |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!مطلوب | !مطلوب | ||
+ | !القيمة الافتراضية | ||
!المنصة | !المنصة | ||
|- | |- | ||
|قيمة منطقيّة | |قيمة منطقيّة | ||
|لا | |لا | ||
+ | |true | ||
|iOS | |iOS | ||
|} | |} | ||
===<code>size</code>=== | ===<code>size</code>=== | ||
− | حجم المؤشر | + | حجم المؤشر. |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!مطلوب | !مطلوب | ||
+ | !القيمة الافتراضية | ||
+ | |- | ||
+ | |enum('small', 'large') | ||
+ | | rowspan="2" |لا | ||
+ | | rowspan="2" |'small' | ||
|- | |- | ||
− | | | + | |عدد على Android |
− | |||
|} | |} | ||
== مصادر == | == مصادر == | ||
* [https://facebook.github.io/react-native/docs/activityindicator صفحة ActivityIndicator في توثيق React Native الرسمي.] | * [https://facebook.github.io/react-native/docs/activityindicator صفحة ActivityIndicator في توثيق React Native الرسمي.] | ||
[[تصنيف:ReactNative]] | [[تصنيف:ReactNative]] |
مراجعة 17:49، 2 أبريل 2021
يعرض مؤشّر تحميل دائريّ.
مثال
- مثال لمكون الصنف (Class Component)
import React, { Component } from "react";
import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
class App extends Component {
render() {
return (
<View style={[styles.container, styles.horizontal]}>
<ActivityIndicator />
<ActivityIndicator size="large" />
<ActivityIndicator size="small" color="#0000ff" />
<ActivityIndicator size="large" color="#00ff00" />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center"
},
horizontal: {
flexDirection: "row",
justifyContent: "space-around",
padding: 10
}
});
export default App;
- مثال لمكون الدالة (Function Component)
import React from "react";
import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
const App = () => (
<View style={[styles.container, styles.horizontal]}>
<ActivityIndicator />
<ActivityIndicator size="large" />
<ActivityIndicator size="small" color="#0000ff" />
<ActivityIndicator size="large" color="#00ff00" />
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center"
},
horizontal: {
flexDirection: "row",
justifyContent: "space-around",
padding: 10
}
});
export default App;
الخاصيات
animating
إظهار المؤشر (true) أو إخفاؤه (false).
النوع | مطلوب | القيمة الافتراضية |
---|---|---|
قيمة منطقيّة | لا | true |
color
لون المؤشّر .
النوع | مطلوب | القيمة الافتراضية |
---|---|---|
color | لا | الرمادي '#999999' على نظام التشغيل iOS
|
hidesWhenStopped
ما إذا كان يجب إخفاء المؤشر عند عدم تحريكه (animating).
النوع | مطلوب | القيمة الافتراضية | المنصة |
---|---|---|---|
قيمة منطقيّة | لا | true | iOS |
size
حجم المؤشر.
النوع | مطلوب | القيمة الافتراضية |
---|---|---|
enum('small', 'large') | لا | 'small' |
عدد على Android |