濡備綍淇敼 React Native 鐨勯粯璁ゅ瓧浣?/a>

Posted 2021-08-21 joking_zhang

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了濡備綍淇敼 React Native 鐨勯粯璁ゅ瓧浣?/a>相关的知识，希望对你有一定的参考价值。

寮曞瓙

鏃堕棿杩囧緱濂藉揩锛屼笉鐭ヤ笉瑙夛紝鍔犲叆鑴夎剦宸茬粡蹇竴涓湀浜嗐€備箣鍓嶇殑宸ヤ綔涓富瑕佸仛涓€浜?PC銆丠5銆丯ode 鐩稿叧鐨勫紑鍙戯紝寮€鍙慠N杩樻槸澶翠竴娆℃帴瑙︼紝鎰熻杩樻尯濂界帺鐨勩€傪煒?/p>

涓轰粈涔堣璁剧疆榛樿瀛椾綋锛?/h2>
鍓嶄袱澶〧ix浜嗕竴涓猂N绔殑BUG锛屽悓浜嬬殑灏忕背10Pro鎵嬫満涓婂彂鐜版枃瀛楄閬尅銆傚涓嬪浘鎵€绀猴細
涓嶄粎鏄皬绫筹紝涓€浜?Android 鐨勫叾浠栨満鍨嬩篃浼氶亣鍒扮被浼肩殑闂銆傚洜涓?Android 鎵嬫満鍘傚晢寰堝寰堝锛屼笉鍍?iPhone 鍙湁涓€瀹跺叕鍙革紝榛樿瀛椾綋鏄笉缁熶竴鐨勩€傝繖鏃跺€欏鏋滅粍浠舵病鏈夎缃瓧浣擄紝灏变細浣跨敤鎵嬫満鐨勯粯璁ゅ瓧浣撱€傝€屾湁浜涘瓧浣擄紝姣斿 鈥淥nePlus Slate鈥濄€佲€滃皬绫冲叞浜璸ro鈥?鍦ㄤ娇鐢?Text 缁勪欢娓叉煋鐨勬椂鍊欙紝灏变細鍑虹幇琚伄鎸＄殑闂銆?/p>
閭ｄ箞锛屽浣曡В鍐宠繖涓棶棰樺憿锛?/p>

濡備綍瀹炵幇鍏ㄥ眬瀛椾綋鐨勪慨鏀?/h2>

鑷畾涔夌粍浠?/h3>

绗竴绉嶆€濊矾姣旇緝绠€鍗曪紝鍙互灏佽 Text 缁勪欢锛岄拡瀵?Android 绯荤粺璁剧疆榛樿瀛椾綋銆?/p>

棣栧厛锛屽垱寤轰竴涓柊鏂囦欢锛屽懡鍚嶄负锛?CustomText.js銆?/p>

// CustomText.js
import React from "react";
import { StyleSheet, Text, Platform } from "react-native";

// Fix android 鏈哄瀷鏂囧瓧琚伄鎸＄殑闂
const defaultAndroidStyles = StyleSheet.create({
  text: {
    fontFamily: ""
  }
});
// 杩欓噷閽堝 web 鍔犱竴涓畝鍗曠殑鏍峰紡锛屾柟渚挎祴璇?const defaultWebStyles = StyleSheet.create({
  text: {
    color: "#165EE9"
  }
});

const CustomText = (props) => {
  let customProps = {
    ...props
  };

  if (Platform.OS === "android") {
    customProps.style = [defaultAndroidStyles.text, props.style];
  }

  if (Platform.OS === "web") {
    customProps.style = [defaultWebStyles.text, props.style];
  }

  delete customProps.children;

  const kids = props.children || props.children === 0 ? props.children : null;

  return <Text {...customProps}>{kids}</Text>;
};

export default CustomText;
澶嶅埗浠ｇ爜

鎺ヤ笅鏉ワ紝鍦?App.js 涓娇鐢ㄨ繖涓粍浠躲€?/p>

// App.js

import React from \'react\';
import { StyleSheet, View, Text } from \'react-native\';
import { CustomText } from \'./CustomText\';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>浣跨敤Props浼犻€抯tyle鏍峰紡</Text>
      <CustomText>浣跨敤CustomText鑷甫style鏍峰紡</CustomText>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: \'center\',
    alignItems: \'center\',
    backgroundColor: \'#070825\'
  },
  text: {
    color: \'#ff0000\'
  }
});
澶嶅埗浠ｇ爜

濡備笅鍥炬墍绀猴紝浼氳嚜甯﹂粯璁ょ殑钃濊壊锛岃€?鍒欓渶瑕佹墜鍔ㄤ紶閫掗鑹茬瓑鏍峰紡銆傚浜?濡傛灉鎴戜滑闇€瑕佷慨鏀归鑹诧紝姝ｅ父浼犻€?style 灞炴€у嵆鍙€?/p>

浣嗘槸杩欑澶勭悊鏂瑰紡闇€瑕佸皢鎵€鏈夊紩鍏ャ€佷娇鐢ㄧ粍浠剁殑閮芥敼涓?锛岃繕鏄瘮杈冮夯鐑︾殑锛屾湁娌℃湁浠€涔堟洿鍔犳柟渚跨殑鏂规硶鍛紵

瑕嗙洊Text缁勪欢鐨剅ender鏂规硶

棣栧厛锛屽鍔犱竴涓嚱鏁帮紝鏉ヨ鐩?Text 鐨?render 鏂规硶锛?/p>

// util.js
import { Text, Platform } from "react-native";

export const setCustomText = () => {
  const TextRender = Text.render;

  let customStyle = {};
  // 閲嶇偣锛孎ix Android 鏍峰紡闂
  if (Platform.OS === "android") {
    customStyle = {
      fontFamily: ""
    };
  }
  // 涓轰簡鏂逛究婕旂ず锛屽鍔犵豢鑹插瓧浣?  if (Platform.OS === "web") {
    customStyle = {
      lineHeight: "1.5em",
      fontSize: "1.125rem",
      marginVertical: "1em",
      textAlign: "center",
      color: "#00ca20"
    };
  }

  Text.render = function render(props, ...rest) {
    const mergedProps = { ...props, style: [customStyle, props.style] };
    return TextRender.apply(this, [mergedProps, ...rest]);
  };
}

杩欓噷鍙傝€冧簡Ajackster/react-native-global-props 涓?setCustomText 鐨勫疄鐜般€?/p>

鐒跺悗鍦?App.js 涓紝璋冪敤 setCustomText 鍑芥暟鍗冲彲銆?/p>

// App.js

import React from \'react\';
import { StyleSheet, View, Text } from \'react-native\';
import { CustomText } from \'./CustomText\';
import { setCustomText } from "./util";

setCustomText();

const App = () => {
  return (
    <View style={styles.container}>
            <Text>閫氳繃璋冪敤 utils.setCustomText() 淇敼</Text>
      <Text style={styles.text}>浣跨敤Props浼犻€抯tyle鏍峰紡</Text>
      <CustomText>浣跨敤CustomText鑷甫style鏍峰紡</CustomText>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: \'center\',
    alignItems: \'center\',
    backgroundColor: \'#070825\'
  },
  text: {
    color: \'#ff0000\'
  }
});
澶嶅埗浠ｇ爜

濡備笅鍥炬墍绀猴紝鎴戜滑鏂板浜嗕竴涓?缁勪欢锛屾病鏈変紶閫掍换浣曞睘鎬э紝浣嗘槸鍙互鐪嬪埌锛屽畠鏄豢鑹茬殑~

浠呬粎闇€瑕佹墽琛屼竴閬嶈繖涓嚱鏁帮紝灏卞彲浠ュ奖鍝嶅埌鎵€鏈夌粍浠剁殑 render 鏂规硶锛屾垜浠笉闇€瑕佸啀瀵煎叆缁勪欢浜嗐€傝繖绉嶆柟寮忕湡鐨勫彲浠ュ府鍔╂垜浠竴鍔虫案閫哥殑瑙ｅ喅杩欎釜闂锛?/p>

demo鍦板潃锛?a href="https://link.segmentfault.com/?url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fwizardly-kirch-y3ddr%3Ffile%3D%2Fsrc%2FApp.js" rel="nofollow">codesandbox.io/s/wizardly-鈥?/a>

鍘熺悊娴呮瀽

React Native Text 缁勪欢

Text 缁勪欢鏄竴涓被缁勪欢锛屽湪瀹冪殑 render 鏂规硶涓紝棣栧厛瑙ｆ瀯浜?props 灞炴€э紝鐒跺悗鏍规嵁鏄惁瀛樺湪绁栧厛鑺傜偣锛屼互鍙婂唴閮ㄧ殑鐘舵€佸悎骞?props 灞炴€с€?/p>

render 鏂规硶缁忚繃 babel 鐨勭紪璇戜箣鍚庯紝浼氳浆鎹㈡垚 React.createElement 鎵€鍖呰９鐨勮娉曟爲锛屼粠鑰岃浆鎹㈡垚铏氭嫙鐨凞om鏍戙€傝繖灏卞彲浠ヨ仈鎯冲埌鍙︿竴涓狝PI 锛?/p>

React.cloneElement(
  element,
  [props],
  [...children]
)
澶嶅埗浠ｇ爜

鎴戜滑鍦ㄨ鐩?Text.render 鏂规硶鏃讹紝鍙渶瑕佷娇鐢?Text.prototype.render.call 寰楀埌涔嬪墠鐨勮妭鐐癸紝鏇存柊 props 锛屽苟璋冪敤 React.cloneElement 寰楀埌涓€涓柊鐨勮妭鐐硅繑鍥炲嵆鍙€?/p>

 import React from \'react\';
 
 import { StyleSheet, Text } from \'react-native\';
 
 const styles = StyleSheet.create({
   defaultFontFamily: {
     fontFamily: \'lucida grande\',
   },
 });
 
 export default function fixOppoTextCutOff() {
   const oldRender = Text.prototype.render;
   Text.prototype.render = function render(...args) {
     const origin = oldRender.call(this, ...args);
     return React.cloneElement(origin, {
       style: [styles.defaultFontFamily, origin.props.style],
     });
   };
 }
澶嶅埗浠ｇ爜

鎼滅储瀹樻柟 issue锛屼細鎵惧埌绫讳技鐨勯棶棰橈細github.com/facebook/re鈥?/a>锛屽氨鏄敤鐨勮繖绉嶈В鍐虫€濊矾銆?/p>

react-native-global-props 鐨勫疄鐜?/h3>

Ajackster/react-native-global-props 鏄竴涓彲浠ユ坊鍔犻粯璁ょ粍浠跺睘鎬х殑搴撱€?/p>

涓嬮潰鎽樿嚜 setCustomText.js

import { Text } from \'react-native\'

export const setCustomText = customProps => {
  const TextRender = Text.render
  const initialDefaultProps = Text.defaultProps
  Text.defaultProps = {
    ...initialDefaultProps,
    ...customProps
  }
  Text.render = function render(props) {
    let oldProps = props
    props = { ...props, style: [customProps.style, props.style] }
    try {
      return TextRender.apply(this, arguments)
    } finally {
      props = oldProps
    }
  }
}
澶嶅埗浠ｇ爜

瀹冭鐩栦簡 Text 缁勪欢鐨勯潤鎬佸睘鎬э細defaultProps 鍜?render 鏂规硶銆傝繖閲屼笉涓€鏍风殑鏄紝瀹冩病鏈夊€熷姪 React.cloneElement 杩斿洖涓€涓柊鐨勮妭鐐癸紝鑰屾槸鍦ㄨ繑鍥炵粨鏋滅殑鍓嶅悗锛屼慨鏀?props 涓殑 style灞炴€э紝杩欓噷绛夊悓浜庝慨鏀?br>arguments[0] 鐨勫€硷紝鍥犱负浠栦滑鐨勫紩鐢ㄧ浉鍚屻€傚苟鍦ㄦ渶鍚庨噸缃畃rops锛岄伩鍏?props 琚薄鏌撱€傚彲浠ョ湅鍑猴紝杩欑鏂瑰紡瀹炵幇鐨勬洿鍔犲阀濡欍€?/p>

浣嗘槸锛岃繖绉嶆柟寮忔瘮杈冧笉瀹规槗鐞嗚В銆傝€屼笖锛屽湪涓ユ牸妯″紡涓嬶紝淇敼 props 涔嬪悗锛宎rguments[0] 骞舵病鏈夋敼鍙樸€傛墍浠ュ湪涓婇潰鏈€鍚庣殑鏂规涓紝娌℃湁鐩存帴浼犲叆 arguments锛屼慨鏀硅€屾槸 merge 浜嗕竴涓柊鐨?Props 瀹炵幇鐨勩€?/p>

styled-components css.Text 涓轰粈涔堜細鍙楀奖鍝?/h3>

styled-components鏄竴涓?code>React鐨勭涓夋柟搴擄紝鏄?code>CSS in JS鐨勪紭绉€瀹炶返銆傚畠瀵逛簬 React Native 涔熸湁鐫€涓嶉敊鐨勬敮鎸併€傚洜涓?React Native 淇敼鏍峰紡鍙兘閫氳繃淇敼 style 灞炴€ф潵瀹屾垚锛屾墍浠?CSS in JS鐨勬柟妗堝浜?React Native 椤圭洰鏉ヨ鏈夌潃澶╃劧鐨勪紭鍔裤€?/p>

瀵逛簬 React 椤圭洰锛?code>styled-components浼氫慨鏀筩lassName 灞炴€ф潵杈惧埌淇敼鏍峰紡鐨勭洰鐨勶紱鑰屽浜嶳eact Native锛屽垯鏄娇鐢ㄤ笅闈㈢殑鏂规硶锛屼慨鏀圭粍浠秔rops涓殑style灞炴€ф潵杈惧埌鐩殑銆?/p>

 propsForElement.style = [generatedStyles].concat(props.style || []);

 propsForElement.ref = refToForward;

 return createElement(elementToBeCreated, propsForElement);
澶嶅埗浠ｇ爜

浣嗘槸锛岃繖涓慨鏀圭殑杩囩▼涓€瀹氭槸鍦ㄦ垜浠噸鍐?render 鍑芥暟涔嬪墠瀹屾垚鐨勩€傛墍浠ワ紝涓婇潰閭ｄ釜鏂规硶淇敼style瀵逛簬styled-components鍒涘缓鐨凴eact Native缁勪欢鍚屾牱閫傜敤銆?/p>

缁撹

鍏充簬濡備綍淇敼React Native鐨勫叏灞€鏍峰紡鐨勮璁烘殏鏃跺憡涓€娈佃惤浜嗐€傜涓€娆″彂鐜拌繕鍙互浠ヨ繖鏍风殑鏂瑰紡淇敼 React 鐨?render 鍑芥暟鐨勫睘鎬э紝鎰熻杩樻槸姣旇緝绁炲鐨勩€備篃鏄涓€娆″皾璇曞啓杩欑鍋忓師鐞嗘帰绌剁殑鏂囩珷锛屽鏋滄湁鍐欑殑涓嶅鐨勫湴鏂癸紝鎴栬€呮兂鍜屾垜浜ゆ祦鐨勮瘽锛屾杩庤瘎璁虹暀瑷€鍝垀

PS锛氬鑴夎剦鎰熷叴瓒ｇ殑灏忎紮浼达紝娆㈣繋鍙戦€佺畝鍘嗗埌 496691544@qq.com 锛屾垜鍙互甯繖鍐呮帹~

鍙傝€?/h2>
React-Native Text鏂囨。 reactnative.cn/docs/text
Two-way to change default font family in React Native ospfolio.com/two-way-to-鈥?/a>
涓€鏂囪В鍐砇N0.58閮ㄥ垎瀹夊崜鎵嬫満text鏄剧ず涓嶅叏闂 segmentfault.com/a/119000002鈥?/a>
react-native-global-props github.com/Ajackster/r鈥?/a>
styled-components 婧愮爜闃呰锛?a href="https://link.segmentfault.com/?url=https%3A%2F%2Fgithub.com%2Fwangpin34%2Fblog%2Fissues%2F49" rel="nofollow">github.com/wangpin34/b鈥?/a>
ReactNative婧愮爜绡囷細婧愮爜鍒濊瘑锛?a href="https://link.segmentfault.com/?url=https%3A%2F%2Fgithub.com%2Fsucese%2Freact-native%2Fblob%2Fmaster%2Fdoc%2FReactNative%25E6%25BA%2590%25E7%25A0%2581%25E7%25AF%2587%2F1ReactNative%25E6%25BA%2590%25E7%25A0%2581%25E7%25AF%2587%25EF%25BC%259A%25E6%25BA%2590%25E7%25A0%2581%25E5%2588%259D%25E8%25AF%2586.md" rel="nofollow">github.com/sucese/reac鈥?/a>
以上是关于濡備綍淇敼 React Native 鐨勯粯璁ゅ瓧浣?/a>的主要内容，如果未能解决你的问题，请参考以下文章

WPS Office for Mac濡備綍淇敼Word鏂囨。鏂囧瓧鎺掑垪锛焀PS office淇敼Word鏂囨。鏂囧瓧鎺掑垪鏂瑰悜鏁欑▼

react濡備綍閰嶇疆antd3.0鐗堟湰

濡備綍閰嶇疆pycaffe

濡備綍鍖哄垎3绉嶅彉閲忛噸鍚嶇殑闂

浜笢濡備綍鐜╄浆TensorFlow?

濡備綍鍒涘缓 http2 node App