在本机反应中管理字符串的最佳方法答案

【问题标题】：Best approach for managing strings in react native在本机反应中管理字符串的最佳方法
【发布时间】：2018-11-11 05:11:43
【问题描述】：

我是 React Native 的新手。我一直在处理这个大项目，其中包含太多可以在项目中的许多地方重用的字符串。所以我创建了一个strings.js 文件，就像在android 的strings.xml 中一样，将所有可重用的字符串存储在一个文件中，就像这样，

export const SOME_STRING = 'Some value';
export const ANOTHER_STRING = 'Another value';
...

并在我需要时导入。

这些是我的问题...

1) 这是一个好方法吗？

2) 有什么替代方法吗？

【问题讨论】：

标签： javascript reactjs react-native ecmascript-6

【解决方案1】：

您不需要导出每个值。我知道的一种更好的方法是导出

const SOME_STRING = 'Some value';
const ANOTHER_STRING = 'Another value';

module.exports = {
 SOME_STRING:SOME_STRING,
 ANOTHER_STRING:ANOTHER_STRING
}

或者您可能希望将所有这些包装在 1 个常量对象中

const APPLICATION_CONSTANTS = {
    SOME_STRING : 'Some string',
    ANOTHER_STRING : 'Another string'
}

export default APPLICATION_CONSTANTS;

用法

import APPLICATION_CONSTANTS from './strings';

APPLICATION_CONSTANTS.SOME_STRING

【讨论】：

第一种方法对我来说似乎太多了。我的意思是，那是 6 行代码，用 2 行就可以轻松完成。使用第一种格式还有其他优势吗？像更少的内存消耗，延迟访问或其他东西。第二种方法似乎不错。这也有什么好处吗？ tnx 的响应。
这两种方法我认为内存消耗都不是问题。事实上，在您当前的应用程序中，内存仍然不是问题。第二种方法易于理解和访问。就像您可以使用一个对象访问所有常量一样，您的工具可能会获得智能感知支持，这将使您的工作变得轻松。
好的。我会采用第二种方法（y）
(y)，同时，如果我找到更好的解决方案，我想更新我的答案。

【解决方案2】：

我假设您因为样式使用了很多字符串。我做同样的事情，我尝试将最大数量的样式信息提取到具有不同样式文件的单独文件夹中。不仅是变量，还有通常分组的样式。

例如：

const styleVariables = {

  // Fonts
  baseFontSize: 16,
  largeFontSize: 24,

  // Icons
  smallIconSize: 24,
  mediumIconSize: 36,

  // Colors
  mainColor: '#e85e45',
  secondaryColor: '#a0c5d8',
  offWhite: '#f4f4f4',
  darkColor: '#404040',

  // Dimensions
  headerHeight: 70,
  shadowSize: 6
};
export default styleVariables;

我在其他相关信息分组的样式文件中引用我的变量：

/* presentation.js */
import variables from './variables';

export const shadow = {
  shadowColor: variables.darkColor,
  shadowRadius: variables.shadowSize,
  shadowOpacity: 0.35,
  shadowOffset: {width: 0, height: 0}
};

export const centered = {
  alignItems: 'center'
  justifyContent: 'center'
}

然后在我的组件中，我只引用我的样式：

import variables from './../styles/variables';
import {centered, shadow} from './../styles/presentation';

class RoundButton extends React.PureComponent {

  render() {
    return (
        <View style={styles.button}>
          {this.props.children}          
        </View>
    );
  }
}

const styles = StyleSheet.create({
  button: {
    width: variables.buttonSize,
    height: variables.buttonSize,
    borderRadius: variables.buttonSize / 2,
    ...centered
    ...shadow
  }

对于文本样式和常见的演示文稿，这确实减少了代码，并允许在一个地方轻松修改。

【讨论】：

【解决方案3】：

很简单，你只需要创建一个 constantString.js 文件，每当你想使用来自 constantString.js 文件的字符串时，只需导入特定文件即可。

constantString.js

module.exports = {
    SOME_STRING : 'Some string',
    ANOTHER_STRING : 'Another string'
}

使用来自 constantString.js 之类的字符串，

import constStr from './constantString';
console.log(constStr.SOME_STRING); // Some string
console.log(constStr.ANOTHER_STRING); // Another string

【讨论】：

【解决方案4】：

您可以使用 react-intl 来处理字符串、日期和数字。这将提供默认函数来处理您的数据。

import { defineMessages } from 'react-intl';
const messages = defineMessages({
 SOME_STRING : 'Some value',
 ANOTHER_STRING : 'Another value',
});
export default messages;

了解更多关于 react-intl 库的信息

【讨论】：

完美。 tnx Amruth (y)