प्रतिक्रिया-मूल

Question

में आइकन वाले बटन को मॉडल कैसे करें I बटन के साथ आइकन शामिल करने के लिए react-native-icons पैकेज का उपयोग कर रहा हूं। उनके पास example folder में एक नमूना कोड सूचीबद्ध है। मैं onPress को देखने पर प्राप्त करने की कोशिश कर रहा हूं लेकिन प्रतिक्रिया करता है कि प्रतिक्रिया-मूल में onPress<View> घटक के लिए फ़ंक्शन नहीं है।

मैंने <TouchableHighlight> का उपयोग करने की कोशिश की लेकिन इसमें केवल एक ही बच्चा तत्व हो सकता है, जैसे कि <Icon> और <Text> अंदर।

मैं भी <Icon> और <Text> अंदर लेकिन <Text> साथ <Text> का उपयोग कर केवल <Text> तत्वों के अंदर हो सकता है की कोशिश की।

क्या किसी के पास समान कार्यक्षमता प्राप्त करने वाला कोई भाग्य है?

<View onPress={this.onBooking} 
    style={styles.button}> 
    <Icon 
    name='fontawesome|facebook-square' 
    size={25} 
    color='#3b5998' 
    style={{height:25,width:25}}/> 
    <Text style={styles.buttonText}>Sign In with Facebook</Text> 
</View> 

Answer 1

आप react-native-icons मॉड्यूल का उपयोग कर रहे हैं, तो आप एक दृश्य में दोनों अपने आइकन और पाठ लपेट कोशिश कर सकते हैं, तो यह की चोटी पर TouchableHighlight का उपयोग करें। की तरह कुछ:

<TouchableHighlight onPress={()=>{}}> 
    <View> 
     <Icon ... /> 
     <Text ... /> 
    </View> 
</TouchableHighlight> 

लेकिन यह बहुत आसान हो सकता है अगर आप एक रिश्तेदार नया मॉड्यूल react-native-vector-icons का उपयोग करें। आप ऐसा कर सकते हैं:

<Icon name="facebook" style={styles.icon}> 
    <Text style={styles.text}>Login with Facebook</Text> 
</Icon> 

Answer 2

मैं इस तरह यह करने के लिए कामयाब रहे। मुझे आश्चर्य है कि क्या एक बेहतर तरीका है।

var styles = StyleSheet.create({ 
    btnClickContain: { 
    flex: 1, 
    flexDirection: 'row', 
    justifyContent: 'center', 
    alignItems: 'stretch', 
    alignSelf: 'stretch', 
    backgroundColor: '#009D6E', 
    borderRadius: 5, 
    padding: 5, 
    marginTop: 5, 
    marginBottom: 5, 
    }, 
    btnContainer: { 
    flex: 1, 
    flexDirection: 'row', 
    justifyContent: 'center', 
    alignItems: 'stretch', 
    alignSelf: 'stretch', 
    borderRadius: 10, 
    }, 
    btnIcon: { 
    height: 25, 
    width: 25, 
    }, 
    btnText: { 
    fontSize: 18, 
    color: '#FAFAFA', 
    marginLeft: 10, 
    marginTop: 2, 
    } 
}); 

<TouchableHighlight 
    onPress={this.onBooking} style={styles.btnClickContain} 
    underlayColor='#042417'> 
    <View 
    style={styles.btnContainer}> 
    <Icon 
     name='fontawesome|facebook-square' 
     size={25} 
     color='#042' 
     style={styles.btnIcon}/> 
    <Text style={styles.btnText}>Sign In with Facebook</Text> 
    </View> 
</TouchableHighlight>