如何从android访问维度并将其应用于react native中的样式答案

【问题标题】：How to access dimensions from android and apply it to style in react native如何从android访问维度并将其应用于react native中的样式
【发布时间】：2017-07-31 09:27:57
【问题描述】：

我正在开发一个混合应用程序反应原生 + Android。我希望整个应用程序的字体大小一致。所以我想访问在 Android 的 dimen.xml 中声明的字体大小，我在其中为不同设备的不同尺寸创建了存根。我可以像这样通过本机模块公开它

@ReactMethod
public float getFontSize(Callback callback){
    callback.invoke(mContext.getResources().getDimension(R.dimen.text_h1));
    return mContext.getResources().getDimension(R.dimen.text_h1);
}

我可以像这样从 react native 访问它

NativeModules.Utilities.getFontSize((textsize)=>console.log(textsize))

但是我怎样才能将它添加到我的以下样式中呢？

TextStyleH1: {
    ...Platform.select({
      ios: {
        fontFamily: "PFEncoreSansPro-Book",
      },
      android: {
        fontFamily: "pfencoresanspro_book",
      },
    }),
    fontSize: 18, // I want to change to textsize returned from NativeModule
  },

澄清

我的样式是在styles.js 中定义的，其中有

const styles = StyleSheet.create({
   ...
});

因为我希望它可以重复使用，因为我有 14 种不同的文本样式并且在我的组件中有很多 <Text />。所以我只想改变styles.js里面的fontSize（如果可能的话）

【问题讨论】：

标签： react-native font-size react-native-android native-module

【解决方案1】：

你必须通过附加样式来添加它：

componentWillMount() {        
    NativeModules.Utilities.getFontSize((textsize)=>this.setState({textsize}));
}

render() {
    return (
        <Text style={[styles.TextStyleH1, {
            fontSize: this.state.textsize
        }]}>
            Sample Text
        </Text>
    );
}

【讨论】：

但在这种情况下，我每次渲染时都必须这样做。我不想这样做，因为我想让我的样式保持独立和可重复使用
另外，我有 14 种不同大小的字体。如果我使用你的方法，那么我将在每个组件中有 14 个状态，仅用于 textSize
@RajSuvariya 您的样式已经是独立且可重复使用的——fontSize 部分除外。这是一个动态值。
是的，但没有任何方法可以更改我的 styles.js 文件中的字体大小吗？
如果你有这么多不同大小的字体，我建议在一个单独的静态类中从NativeModules 获取所有内容。