Thay đổi văn bản nút đăng nhập FB (react-native-fbsdk)

Question

Tôi đang sử dụng phản ứng-native-fbsdk. Làm cách nào để thay đổi văn bản nút đăng nhập fb từ 'Đăng nhập bằng facebook' thành 'Tiếp tục với fb'?

Thành phần trông như thế này, và tôi không thể tìm thấy một cách để thay đổi nó:

<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

Cách đơn giản nhất là để upgrade the SDK to 4.19.0:

Các LoginButton UI được thay đổi trong 4.19. 0. Thay vì "Đăng nhập bằng Facebook", nút hiện hiển thị "Tiếp tục với Facebook". Màu nút được đổi thành # 4267B2 từ # 3B5998. Chiều cao của nút giảm từ 30dp xuống 28dp do sử dụng kích thước phông chữ nhỏ hơn và phần đệm xung quanh logo Facebook lớn hơn.

Giao diện sử dụng LoginButton vẫn giữ nguyên. Vui lòng dành thời gian để đảm bảo nút LoginButton được cập nhật không làm hỏng UX của bạn của ứng dụng

Tuy nhiên, nếu bạn muốn tùy chỉnh sử dụng nó để kích hoạt các Login Manager, ví dụ:

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" 
     /> 
    ) 
    } 
} 

bằng cách đó cũng cung cấp cho bạn toàn quyền kiểm soát các giao diện người dùng trong đó đặc biệt có ích nếu bạn có thư viện các thành phần riêng của bạn, hoặc sử dụng một sẵn sàng thực hiện một mặt hàng như NativeBase.

Answer 2

Đối với những người muốn tùy chỉnh nút, tôi không tìm thấy cách thay đổi văn bản, nhưng bạn có thể thay đổi chiều rộng và chiều cao của nút này trong node-modules/react-native-fbsdk/js/FBLoginButton.js.

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

Tôi đã viết ở đây giá trị 195 để văn bản 'Tiếp tục với Facebook' phù hợp.