Question

我是反应原生的新手。我一直在处理这个大项目，它包含太多的字符串，可以在项目的许多地方重复使用。所以我创建了一个strings.js文件，就像在android strings.xml中一样，将所有可重用的字符串存储在一个文件中，如下所示，

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

并随时随地进口。

所以这些是我的问题......

1）这是一个好方法吗？

2）有替代方案吗？

Answer 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

Answer 2

简单只需要创建一个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

Answer 3

您可以使用react-intl来播放字符串，日期和数字。它将提供处理数据的默认功能。

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

详细了解react-intl库

Answer 4

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

例如：

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
  }

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

在本机中管理字符串的最佳方法

4 个答案: