আমি কোনও পাঠ্য ক্ষেত্রে একক শব্দ কীভাবে সাহসী বা তির্যক করতে পারি? এই জাতীয় মত:
<Text>This is a sentence <b>with</b> one word in bold</Text>
আমি যদি সাহসী চরিত্রের জন্য একটি নতুন পাঠ্য ক্ষেত্র তৈরি করি তবে এটি এটি অন্য লাইনে আলাদা করবে যাতে এটি করার উপায়টি অবশ্যই না surely এটি কেবল একটি শব্দকে সাহসী করার জন্য <p> ট্যাগের মধ্যে <p> ট্যাগ তৈরির মতো হবে।
উত্তর:
আপনি <Text>আপনার অন্যান্য পাঠ্য উপাদানগুলির জন্য ধারকটির মতো ব্যবহার করতে পারেন । এটি উদাহরণ:
...
<Text>
<Text>This is a sentence</Text>
<Text style={{fontWeight: "bold"}}> with</Text>
<Text> one word in bold</Text>
</Text>
...এখানে একটি উদাহরণ ।
<Text style={{fontWeight: 'bold'}}> with</Text>তিনটি পৃথক লাইনে বিভক্ত করেন তবে আপনি শীর্ষস্থানীয় স্থানটি হারাবেন, যাতে {' with'}আপনি সর্বদা এটি রয়েছেন তা নিশ্চিত হয়ে আপনি ব্যবহার করতে চাইতে পারেন ।
styled-componentsএকটি সাহসী পাস করতে পারেন যে চিহ্নিত করতে চাই property।
আরও ওয়েব-মত অনুভূতির জন্য:
const B = (props) => <Text style={{fontWeight: 'bold'}}>{props.children}</Text><Text>I am in <B>bold</B> yo.</Text><Strong>পরিবর্তে ব্যবহার করুন <B>:)
const B = this.Bকরতেrender
আপনি https://www.npmjs.com/package/react-native-parsed-text ব্যবহার করতে পারেন
import ParsedText from 'react-native-parsed-text';
class Example extends React.Component {
static displayName = 'Example';
handleUrlPress(url) {
LinkingIOS.openURL(url);
}
handlePhonePress(phone) {
AlertIOS.alert(`${phone} has been pressed!`);
}
handleNamePress(name) {
AlertIOS.alert(`Hello ${name}`);
}
handleEmailPress(email) {
AlertIOS.alert(`send email to ${email}`);
}
renderText(matchingString, matches) {
// matches => ["[@michel:5455345]", "@michel", "5455345"]
let pattern = /\[(@[^:]+):([^\]]+)\]/i;
let match = matchingString.match(pattern);
return `^^${match[1]}^^`;
}
render() {
return (
<View style={styles.container}>
<ParsedText
style={styles.text}
parse={
[
{type: 'url', style: styles.url, onPress: this.handleUrlPress},
{type: 'phone', style: styles.phone, onPress: this.handlePhonePress},
{type: 'email', style: styles.email, onPress: this.handleEmailPress},
{pattern: /Bob|David/, style: styles.name, onPress: this.handleNamePress},
{pattern: /\[(@[^:]+):([^\]]+)\]/i, style: styles.username, onPress: this.handleNamePress, renderText: this.renderText},
{pattern: /42/, style: styles.magicNumber},
{pattern: /#(\w+)/, style: styles.hashTag},
]
}
childrenProps={{allowFontScaling: false}}
>
Hello this is an example of the ParsedText, links like http://www.google.com or http://www.facebook.com are clickable and phone number 444-555-6666 can call too.
But you can also do more with this package, for example Bob will change style and David too. foo@gmail.com
And the magic number is 42!
#react #react-native
</ParsedText>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
url: {
color: 'red',
textDecorationLine: 'underline',
},
email: {
textDecorationLine: 'underline',
},
text: {
color: 'black',
fontSize: 15,
},
phone: {
color: 'blue',
textDecorationLine: 'underline',
},
name: {
color: 'red',
},
username: {
color: 'green',
fontWeight: 'bold'
},
magicNumber: {
fontSize: 42,
color: 'pink',
},
hashTag: {
fontStyle: 'italic',
},
});এই প্রতিক্রিয়া নেটিভ লাইব্রেরি ব্যবহার করুন
স্থাপন করা
npm install react-native-htmlview --save
বেসিক ব্যবহার
import React from 'react';
import HTMLView from 'react-native-htmlview';
class App extends React.Component {
render() {
const htmlContent = 'This is a sentence <b>with</b> one word in bold';
return (
<HTMLView
value={htmlContent}
/> );
}
}প্রায় সব এইচটিএমএল ট্যাগ সমর্থন করে।
আরও উন্নত ব্যবহারের জন্য যেমন
এই ReadMe দেখুন
এটি যেমন পাঠ্য ক্ষেত্রে বলা হয়েছে তেমন নয় তবে পৃথক পাঠ্য উপাদানগুলিকে একটি দৃশ্যে মোড়ানো পছন্দসই আউটপুট দেয়। আপনি যদি কেবল কয়েকটি পাঠ্য স্টাইল করার জন্য আপনার প্রকল্পে অন্য একটি গ্রন্থাগার যুক্ত করতে না চান তবে এটি ব্যবহার করা যেতে পারে।
<View style={{flexDirection: 'row'}}>
<Text style={{fontWeight: '700', marginRight: 5}}>Contact Type:</Text>
<Text>{data.type}</Text>
</View>
নিম্নলিখিত হিসাবে ফলাফল হবে
আমি প্রতিক্রিয়া-স্থানীয়-স্প্যানিয়েবল-স্ট্রিংয়ের একজন রক্ষণাবেক্ষণকারী
<Text/>কাস্টম স্টাইল সহ নেস্টেড উপাদানগুলি ভাল কাজ করে তবে রক্ষণাবেক্ষণযোগ্যতা কম।
আমি আপনাকে এই লাইব্রেরিটির মতো স্প্যানিয়েবল স্ট্রিং তৈরি করার পরামর্শ দিচ্ছি।
SpannableBuilder.getInstance({ fontSize: 24 })
.append('Using ')
.appendItalic('Italic')
.append(' in Text')
.build()
আপনি প্রয়োজনীয় স্টাইল দিয়ে কেবল টেক্সট উপাদানগুলিকে বাসাতে পারেন। প্রথম পাঠ্য উপাদানটিতে ইতিমধ্যে সংজ্ঞায়িত শৈলীর সাথে শৈলী প্রয়োগ করা হবে।
উদাহরণ:
<Text style={styles.paragraph}>
Trouble singing in. <Text style={{fontWeight: "bold"}}> Resolve</Text>
</Text>
পাঠ্য উপাদানগুলিতে বাসা বাঁধাই এখন সম্ভব নয়, তবে আপনি নিজের পাঠ্যটি এই জাতীয় দৃশ্যে আবদ্ধ করতে পারেন:
<View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
<Text>
{'Hello '}
</Text>
<Text style={{fontWeight: 'bold'}}>
{'this is a bold text '}
</Text>
<Text>
and this is not
</Text>
</View>
আমি শব্দের মধ্যে স্পেস জোর করতে বন্ধনীগুলির মধ্যে স্ট্রিংগুলি ব্যবহার করেছি, তবে আপনি মার্জিনরাইট বা মার্জিনলাইট দ্বারাও এটি অর্জন করতে পারেন। আশা করি এটা সাহায্য করবে.
<Text>
<Text style={{fontWeight: "bold"}}>bold</Text>
normal text
<Text style={{fontStyle: "italic"}}> italic</Text>
</Text>
পাঠ্য বোল্ড:
<Text>
<Text>This is a sentence</Text>
<Text style={{fontWeight: "bold"}}> with</Text>
<Text> one word in bold</Text>
</Text>
ইটালিক পাঠ্য:
<Text>
<Text>This is a sentence</Text>
<Text style={{fontStyle: "italic"}}> with</Text>
<Text> one word in italic</Text>
</Text>