मैं हालांकि वे जाने के लिए एक रास्ता है प्रमुख दावेदार के रूप में Github पर इन आंशिक कार्यान्वयन पाया है:प्रतिक्रिया-मूल आईओएस ऐप में सामग्री डिज़ाइन का उपयोग करने का सबसे आसान तरीका क्या है?
वे इस समय कुछ घटकों की कमी है कि मैं करूंगा उपयोग करना पसंद है। क्या कोई वैकल्पिक समाधान है जो मुझे याद आ रहा है?
यहाँ एक और ... http://mrn.js.org/
जो भी यहाँ उपलब्ध है ... https://github.com/binggg/mrn
सुंदर मेरे लिए अच्छा लग रहा है, हालांकि मैं अभी तक इसका उपयोग नहीं किया है। आप विशेष रूप से क्या देखते हैं दूसरों से गुम है?
मुझे विश्वास है कि xinthink द्वारा यह लाइब्रेरी आपके द्वारा प्राप्त की जाएगी।
मैं इसे एंड्रॉइड और आईओएस दोनों पर उपयोग कर रहा हूं।
ईमानदार होने के बावजूद, उन सभी पुस्तकालयों ने आपको कुछ शैलियों को दिया है, ताकि आप स्वयं भी लिख सकें। निम्नलिखित शैलियों का उपयोग
<ScrollView style={styles.scrollView}>
<View style={styles.cardContainer}>
<View style={styles.card}>
<View resizeMode="cover" style={styles.cardTitleContainer}>
<Text style={styles.cardTitle}>Commented on</Text>
</View>
<View // TextView padding not handled well on Android https://github.com/facebook/react-native/issues/3233
style={{
padding : 15,
}}
>
<Text style={styles.cardContent}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
</Text>
</View>
<View style={styles.cardAction}>
<Text>My Action</Text>
</View>
</View>
</View>
</ScrollView>
:
उदाहरण के लिए यदि आप ऐसा तरह एक सामग्री डिजाइन कार्ड बना सकते हैं
cardContainer:{
flex: 1,
alignItems: 'stretch',
backgroundColor: '#F5FCFF',
padding: 20,
marginTop: self.props.device.platform === 'android' ? 56 : 0,
},
card:{
flex: 1,
backgroundColor: '#ffffff',
borderRadius: 2,
borderColor: '#ffffff',
borderWidth: 1,
shadowColor: 'rgba(0, 0, 0, 0.12)',
shadowOpacity: 0.8,
shadowRadius: 2,
shadowOffset: {
height: 1,
width: 2,
},
},
cardTitleContainer:{
flex: 1,
height: 170,
},
cardTitle:{
position: 'absolute',
top: 120,
left: 26,
backgroundColor: 'transparent',
padding: 16,
fontSize: 24,
color: '#000000',
fontWeight: 'bold',
},
cardContent:{
padding:0,
color: 'rgba(0, 0, 0, 0.54)',
},
cardAction:{
borderStyle: 'solid',
borderTopColor: 'rgba(0, 0, 0, 0.1)',
borderTopWidth: 1,
padding: 15,
},
मैं पुस्तकालय मैं अपने लिंक में साझा से इस उदाहरण कोड मिला है। आप यह भी देखेंगे कि इस पुस्तकालय में कोई कस्टम घटक नहीं हैं, सिर्फ शैलियों।
मैं react-native-material-ui पर काम कर रहा हूं जो material-ui के करीब होना चाहिए।
हमें आवेदन की शैली/विषय को पूरी तरह से और आसानी से बदलने के विकल्प की आवश्यकता थी। और ऐसी कोई पुस्तकालय नहीं है जो उस संभावना को प्रदान करे। बेशक, आप घटक के प्रोप के माध्यम से कुछ चीजें सेट कर सकते हैं। लेकिन आपको इसे अपने कोड में हर जगह बदलना होगा जहां आप उस घटक का उपयोग करते हैं।
मैं प्रतिक्रिया देशी-सामग्री-ui और एक Redux दुकान के साथ संयोजित उपयोग कर रहा हूँ अपने स्वयं के घटकों में भी अपनी शैली का उपयोग कर सकते हैं। इस तरह से मैं फ्लाई पर थीम-स्विचिंग कर सकता हूं!
दुर्भाग्यवश शुरुआत में हमें प्रति नियंत्रण शैलियों को परिभाषित करना होगा, क्योंकि प्रतिक्रिया-मूल-सामग्री-ui के 'ThemeProviders uiTheme कनेक्टर' एक तरह से टिकट लगता है।
वैसे भी, अगर सबकुछ वायर्ड हो गया है, तो मैं अपनी सभी शैलियों को एक बड़ी शैलियों में प्रबंधित कर सकता हूं। जेएस, जिसमें केवल एक प्लेटफॉर्म शामिल है। ओएस क्वेरी, एकाधिक स्किन्स और एक ड्रॉप डाउन के माध्यम से पूर्ण विषयों को बदलना, क्रिया/राज्य परिवर्तन, तैयार करना स्थानीय निरंतर भंडारण में सहेजने के लिए।
प्रतिक्रिया-मूल-सामग्री-ui बहुत अच्छा लग रहा है।
<ActionButton
actions={[
{ icon: 'email', label: 'Email' },
{ icon: 'phone', label: 'Phone' },
{ icon: 'sms', label: 'Text' },
{ icon: 'favorite', label: 'Favorite' },
]}
//not defined
//hidden={this.state.bottomHidden}
icon="share"
transition="speedDial"
onPress={(action) => {
if (myPlatform === 'android') {
ToastAndroid.show(action, ToastAndroid.SHORT);
}
} }
style={{
positionContainer: { bottom: 76 },
container: myStyle.testBack, //<--DYNAMIC !
}}
/>
धन्यवाद क्रिस। मेरा मानना है कि वर्तमान में केवल एंड्रॉइड ही है और लेखक का कहना है कि उनके पास आईओएस की कोई योजना नहीं है। –
ओह, क्षमा करें ... मैंने उस महत्वपूर्ण जानकारी की उपेक्षा की। –
प्रतिक्रिया-मूल-सामग्री-डिजाइन एमआरएन के शीर्ष पर आधारित है। यह आईओएस पर काम करता है, लेकिन हालांकि कुछ बदलावों की आवश्यकता है। – Alias