রিএ্যাক্ট নেটিভে এই সিএসএসের সমতুল্য কি রয়েছে, যাতে অ্যাপটি সর্বত্র একই ফন্ট ব্যবহার করে?
body {
font-family: 'Open Sans';
}
এটি প্রতিটি পাঠ্য নোডে ম্যানুয়ালি প্রয়োগ করা অত্যধিক জটিল বলে মনে হচ্ছে।
উত্তর:
প্রস্তাবিত উপায় হ'ল মাই অ্যাপটেক্সট এর মতো আপনার নিজের উপাদান তৈরি করা। মাইঅ্যাপটেক্সট হ'ল একটি সাধারণ উপাদান যা আপনার সর্বজনীন স্টাইল ব্যবহার করে একটি পাঠ্য উপাদানকে রেন্ডার করে এবং অন্যান্য প্রপসগুলি ইত্যাদির মধ্য দিয়ে যেতে পারে etc.
https://facebook.github.io/react-native/docs/text.html# मर्यादित- স্টাইল- ইতিহাস
render()কনস্ট্রাক্টরের পরিবর্তে পরিচালনা করতে হবে । useMemoদক্ষতা গুরুত্বপূর্ণ হলে এর সাথে হুক ব্যবহার করাও সহায়তা করতে পারে। বিকল্পভাবে, আপনি যদি এটি কনস্ট্রাক্টরে রাখতে চান তবে একটি componentDidUpdateযুক্তি যুক্ত করা গুরুত্বপূর্ণ যা this.styleস্টাইল প্রোপ পরিবর্তনের কারণে উপাদানগুলি আপডেট হওয়ার পরে আপডেট হয়।
সেখানে সম্প্রতি একটি নোড মডিউল যে সমাধান এই সমস্যা হয়েছিল, যাতে তুমি ছিলে না আছে অন্য উপাদান তৈরি ।
https://github.com/Ajackster/react-native-global-prop
https://www.npmjs.com/package/react-native-global-prop
ডকুমেন্টেশনটি জানিয়েছে যে আপনার সর্বোচ্চ অর্ডারের উপাদানগুলিতে, setCustomTextফাংশনটি তেমনভাবে আমদানি করুন ।
import { setCustomText } from 'react-native-global-props';
তারপরে, প্রতিক্রিয়া-নেটিভ Textউপাদানটির জন্য আপনার পছন্দসই কাস্টম স্টাইলিং / প্রপস তৈরি করুন । আপনার ক্ষেত্রে, আপনি ফন্টফ্যামিলি প্রতিটি Textউপাদানগুলিতে কাজ করতে চান ।
const customTextProps = {
style: {
fontFamily: yourFont
}
}
setCustomTextফাংশনটি কল করুন এবং আপনার প্রপস / শৈলীগুলি ফাংশনে প্রবেশ করুন।
setCustomText(customTextProps);
এবং তারপরে সমস্ত প্রতিক্রিয়া-নেটিভ Textউপাদানগুলিতে আপনার প্রদত্ত অন্য প্রপস / শৈলীর সাথে আপনার ঘোষিত ফন্টটি থাকবে ।
<Text style={styles.text}>?? এটি নির্ভুল সমাধান নয় যেমন Thats এর body {font-family: 'Open Sans';} কোনও আপডেট সমাধান আছে ??
Text style={styles.text}>। আপনার অ্যাপ্লিকেশনের কোথাও আপনার কাস্টম প্রপসগুলি আপনাকে ঘোষণা করতে হবে এবং এটি আপনার সমস্ত পাঠ্যের উপাদানগুলিতে প্রয়োগ করা হবে। এটির সাথে খুব মিলbody {font-family: ....}
দেশীয় 0.56.0+ প্রতিক্রিয়া জানানোর জন্য প্রথমে ডিফল্টপ্রোপগুলি সংজ্ঞায়িত করা হয়েছে কিনা তা পরীক্ষা করে দেখুন:
Text.defaultProps = Text.defaultProps || {}
পরে যুক্ত:
Text.defaultProps.style = { fontFamily: 'some_font' }
অ্যাপ.জেএস ফাইল (বা আপনার কাছে থাকা কোনও মূল উপাদান) এর কনস্ট্রাক্টারে উপরেরটি যুক্ত করুন।
শৈলীতে ওভাররাইড করার জন্য আপনি একটি শৈলী অবজেক্ট তৈরি করতে এবং এটি ছড়িয়ে দিতে পারেন তবে আপনার অতিরিক্ত শৈলী যুক্ত করুন (উদাঃ { ...baseStyle, fontSize: 16 })
defaultPropsযখন উপস্থিত করেনি সব অন্যান্য উত্তর লেখা হয়েছে কিন্তু এই ভাবে এখন এটা করতে হবে বলে মনে হচ্ছে।
styleবিশেষ Textউপাদানগুলির শৈলীগুলি
styleটেক্সট উপাদানটিতে প্রপ সংজ্ঞা দেয় তবে ডিফল্ট ফন্টটি প্রতিস্থাপন করতে চলেছে।
আপনি পাঠ্য ব্যবহার করে আপনার যে কোনও উপাদানতে এটি যোগ করে পাঠ্য আচরণকে ওভাররাইড করতে পারেন:
let oldRender = Text.prototype.render;
Text.prototype.render = function (...args) {
let origin = oldRender.call(this, ...args);
return React.cloneElement(origin, {
style: [{color: 'red', fontFamily: 'Arial'}, origin.props.style]
});
};
সম্পাদনা করুন: যেহেতু দেশীয় 0.56 প্রতিক্রিয়া দেখাচ্ছেন, Text.prototypeআর কাজ করছে না। আপনাকে এগুলি সরিয়ে ফেলতে হবে .prototype:
let oldRender = Text.render;
Text.render = function (...args) {
let origin = oldRender.call(this, ...args);
return React.cloneElement(origin, {
style: [{color: 'red', fontFamily: 'Arial'}, origin.props.style]
});
};
প্রতিক্রিয়া-নেটিভ ০.০6 সহ, উপরের পরিবর্তনের উপরের পদ্ধতিটি Text.prototype.renderআর কাজ করে না, সুতরাং আপনাকে নিজের উপাদান ব্যবহার করতে হবে, যা এক লাইনে করা যেতে পারে!
MyText.js
export default props => <Text {...props} style={[{fontFamily: 'Helvetica'}, props.style]}>{props.children}</Text>
আরেকটি কম্পোনেন্ট.জেএস
import Text from './MyText';
...
<Text>This will show in default font.</Text>
...
useRef। reactjs.org/docs/hooks-reference.html#useref
আপনার মূল Appউপাদানটিতে এই ফাংশনটি যুক্ত করুন এবং তারপরে এই নির্দেশাবলী ব্যবহার করে আপনার ফন্ট যুক্ত করার পরে এটি আপনার নির্মাণকারীর কাছ থেকে চালান। https://medium.com/react-native-training/react-native-custom-fouts-ccc9aacf9e5e
import {Text, TextInput} from 'react-native'
SetDefaultFontFamily = () => {
let components = [Text, TextInput]
const customProps = {
style: {
fontFamily: "Rubik"
}
}
for(let i = 0; i < components.length; i++) {
const TextRender = components[i].prototype.render;
const initialDefaultProps = components[i].prototype.constructor.defaultProps;
components[i].prototype.constructor.defaultProps = {
...initialDefaultProps,
...customProps,
}
components[i].prototype.render = function render() {
let oldProps = this.props;
this.props = { ...this.props, style: [customProps.style, this.props.style] };
try {
return TextRender.apply(this, arguments);
} finally {
this.props = oldProps;
}
};
}
}
const App = StackNavigator({...})এবং export default Appআমি এই কোডটি ঠিক কোথায় রাখব কারণ আমি মনে করি না যে আমি এখানে কোনও নির্মাণকারী ব্যবহার করতে পারি?
এই থ্রেডে দুর্দান্ত দেরি হলেও এখানে যায়।
টিএলডিআর; আপনার নিম্নলিখিত ব্লক যুক্ত করুনAppDelegate.m
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
....
// HERE: replace "Verlag" with your font
[[UILabel appearance] setFont:[UIFont fontWithName:@"Verlag" size:17.0]];
....
}
আপনি react-native-global-propsএইভাবে কোনও প্লাগইন ব্যবহারের বাইরে কিছু উপায় করতে পারেন সুতরাং ধাপে ধাপে আপনাকে হাঁটতে পারে।
প্রথমে আমাদের সম্পদের জন্য একটি অবস্থান তৈরি করা যাক। আসুন নীচের ডিরেক্টরিটি আমাদের রুটে তৈরি করুন।
`` `
ios/
static/
fonts/
`` `
এখন আসুন আমাদের প্যাকেজ.জসনে একটি "রিএ্যাক্ট নেটিভ" এনপিএম যুক্ত করুন
"rnpm": {
"static": [
"./static/fonts/"
]
}
এখন আমরা আমাদের দেশীয় অ্যাপ্লিকেশনগুলিতে আমাদের সম্পদ যুক্ত করতে "প্রতিক্রিয়া-নেটিভ লিঙ্ক" চালাতে পারি।
প্রকল্পগুলিতে এটি আপনার ফন্টের নাম যুক্ত করা উচিত .plist
(ভিএস কোড ব্যবহারকারীদের code ios/*/Info.plistনিশ্চিত করার জন্য চালিত হয়)
এখানে ধরে Verlagনেওয়া যাক আপনি যে ফন্টটি যুক্ত করেছেন এটি এটির মতো দেখতে হবে:
<dict>
<plist>
.....
<key>UIAppFonts</key>
<array>
<string>Verlag Bold Italic.otf</string>
<string>Verlag Book Italic.otf</string>
<string>Verlag Light.otf</string>
<string>Verlag XLight Italic.otf</string>
<string>Verlag XLight.otf</string>
<string>Verlag-Black.otf</string>
<string>Verlag-BlackItalic.otf</string>
<string>Verlag-Bold.otf</string>
<string>Verlag-Book.otf</string>
<string>Verlag-LightItalic.otf</string>
</array>
....
</dict>
</plist>
এখন আপনি সেগুলি ম্যাপ করেছেন, এখন আসুন নিশ্চিত হয়ে নিন যে তারা প্রকৃতপক্ষে সেখানে রয়েছে এবং বোঝা হচ্ছে (এটি আপনি নিজে নিজে এটি করতে চান)।
যান "Build Phase" > "Copy Bundler Resource", যদি এটি কাজ না করে তবে আপনি এখানে তাদের ম্যানুয়ালি যোগ করবেন।
প্রথমে আপনার এক্সকোড লগগুলি খুলুন:
তারপরে আপনি AppDelegate.mফন্ট এবং ফন্ট পরিবারের নাম লগ করতে আপনার নিচের ব্লকটি যুক্ত করতে পারেন ।
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
.....
for (NSString* family in [UIFont familyNames])
{
NSLog(@"%@", family);
for (NSString* name in [UIFont fontNamesForFamilyName: family])
{
NSLog(@" %@", name);
}
}
...
}
একবার চালানোর পরে আপনার ফন্টগুলি সঠিকভাবে লোড করা সন্ধান করা উচিত, আমরা এখানে আমাদের মতো লগগুলিতে দেখতে পেলাম:
2018-05-07 10:57:04.194127-0700 MyApp[84024:1486266] Verlag
2018-05-07 10:57:04.194266-0700 MyApp[84024:1486266] Verlag-Book
2018-05-07 10:57:04.194401-0700 MyApp[84024:1486266] Verlag-BlackItalic
2018-05-07 10:57:04.194516-0700 MyApp[84024:1486266] Verlag-BoldItalic
2018-05-07 10:57:04.194616-0700 MyApp[84024:1486266] Verlag-XLight
2018-05-07 10:57:04.194737-0700 MyApp[84024:1486266] Verlag-Bold
2018-05-07 10:57:04.194833-0700 MyApp[84024:1486266] Verlag-Black
2018-05-07 10:57:04.194942-0700 MyApp[84024:1486266] Verlag-XLightItalic
2018-05-07 10:57:04.195170-0700 MyApp[84024:1486266] Verlag-LightItalic
2018-05-07 10:57:04.195327-0700 MyApp[84024:1486266] Verlag-BookItalic
2018-05-07 10:57:04.195510-0700 MyApp[84024:1486266] Verlag-Light
সুতরাং এখন আমরা জানি যে এটি Verlagপরিবারের বোঝা এবং এটি পরিবারের অভ্যন্তরে হরফ
Verlag-BookVerlag-BlackItalicVerlag-BoldItalicVerlag-XLightVerlag-BoldVerlag-BlackVerlag-XLightItalicVerlag-LightItalicVerlag-BookItalicVerlag-Lightএগুলি হ'ল কেস সংবেদনশীল নাম আমরা আমাদের ফন্ট পরিবারে ব্যবহার করতে পারি আমরা আমাদের প্রতিক্রিয়া নেটিভ অ্যাপ্লিকেশনটিতে ব্যবহার করতে পারি।
তারপরে AppDelegate.mএই লাইনের সাথে আপনার ফন্টের পরিবারের নাম যুক্ত করতে একটি ডিফল্ট ফন্ট সেট করতে
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
....
// ADD THIS LINE (replace "Verlag" with your font)
[[UILabel appearance] setFont:[UIFont fontWithName:@"Verlag" size:17.0]];
....
}
সম্পন্ন.
এটি আমার পক্ষে কাজ করে: প্রতিক্রিয়া নেটিভে কাস্টম ফন্ট যুক্ত করুন
আপনার ফন্টগুলি ডাউনলোড করুন এবং সেগুলি সম্পদ / ফন্ট ফোল্ডারে রাখুন, প্যাকেজ.জসনে এই লাইনটি যুক্ত করুন
"rnpm": {
"assets": ["assets/fonts/Sarpanch"]}
তারপরে টার্মিনালটি খুলুন এবং এই আদেশটি চালান: দেশীয় লিঙ্কটি প্রতিক্রিয়া করুন
এখন আপনার যেতে ভাল। আরও বিস্তারিত পদক্ষেপের জন্য। উল্লিখিত লিঙ্কটি দেখুন
অ্যাড
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
মধ্যে package.json
তারপর চালানোreact-native link
প্যাকেজ.জসনে সেট করুন
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
এবং লিঙ্ক প্রতিক্রিয়া নেটিভ লিঙ্ক