एफबी लॉगिन बटन टेक्स्ट बदलें (प्रतिक्रिया-देशी-fbsdk)

Question

मैं प्रतिक्रिया-देशी-fbsdk का उपयोग कर रहा हूं। मैं 'फेसबुक के साथ लॉगिन' से 'एफबी के साथ जारी रखें' से एफबी लॉगिन बटन टेक्स्ट कैसे बदल सकता हूं?

घटक इस तरह दिखता है, और मैं एक तरह से इसे बदलने के लिए नहीं मिल सकता है:

<LoginButton 
      style={styles.facebookbutton} 
      readPermissions={["public_profile", 'email']} 
      onLoginFinished={ 
      (error, result) => { 
       if (error) { 
       console.log("login has error: " + result.error); 
       } else if (result.isCancelled) { 
       console.log("login is cancelled."); 
       } else { 
       AccessToken.getCurrentAccessToken().then(
        (data) => { 
        console.log(data); 
        console.log(data.accessToken.toString()); 
        } 
       ) 
       } 
      } 
      } 
      onLogoutFinished={() => alert("logout.")}/> 

Answer 1

सबसे आसान तरीका है upgrade the SDK to 4.19.0 के लिए है:

LoginButton यूआई 4.19 में बदल जाता है। 0। "फेसबुक के साथ लॉग इन करें" के बजाय, बटन अब "फेसबुक के साथ जारी रखें" प्रदर्शित करता है। बटन रंग # 3 बी 5 9 8 9 से # 4267 बी 2 में बदल दिया गया है। एक बड़े फेसबुक लोगो के चारों ओर छोटे फ़ॉन्ट आकार और पैडिंग के उपयोग के कारण बटन ऊंचाई 30 डीपी से 28 डीपी तक कम हो गई है।

लॉगिनबटन का उपयोग करने के लिए इंटरफ़ेस वही रहता है। कृपया अद्यतन LoginButton सुनिश्चित करने के लिए आपके ऐप की UX उल्लंघन नहीं करती है

हालांकि, अगर आप टेक्स्ट को अनुकूलित तो यह सचमुच का कहना है आप बटन घटक से बनाना होगा चाहते हैं "अमेरिकन प्लान के साथ जारी रखें" के बाद कर रहे हैं समय लेने के लिए, और Login Manager, यानी गति प्रदान करने के लिए इसका इस्तेमाल:

import React, { Component } from 'react' 
import { Button } from 'react-native' 

import { LoginManager } from 'react-native-fbsdk' 

export default class Login extends Component { 
    handleFacebookLogin() { 
    LoginManager.logInWithReadPermissions(['public_profile', 'email', 'user_friends']).then(
     function (result) { 
     if (result.isCancelled) { 
      console.log('Login cancelled') 
     } else { 
      console.log('Login success with permissions: ' + result.grantedPermissions.toString()) 
     } 
     }, 
     function (error) { 
     console.log('Login fail with error: ' + error) 
     } 
    ) 
    } 
    render() { 
    return (
     <Button 
     onPress={this.handleFacebookLogin} 
     title="Continue with fb" 
     color="#4267B2" 
     /> 
    ) 
    } 
} 

इस तरह भी आप यूआई जो विशेष रूप से उपयोगी है अगर आप अपने खुद के घटक पुस्तकालय है, या एक तैयार NativeBase तरह से एक बना दिया का उपयोग पर पूर्ण नियंत्रण देता।

Answer 2

जो लोग बटन को कस्टमाइज़ करना चाहते हैं, उनके लिए मुझे अपना टेक्स्ट बदलने का तरीका नहीं मिला है, लेकिन आप node-modules/react-native-fbsdk/js/FBLoginButton.js में इस बटन की चौड़ाई और ऊंचाई बदल सकते हैं।

const styles = StyleSheet.create({ 
    defaultButtonStyle: { 
    height: 30, 
    width: 195, 
    }, 
}); 

मैंने यहां 195 का मूल्य लिखा है ताकि 'फेसबुक के साथ जारी रखें' टेक्स्ट अच्छी तरह से फिट हो।