Лучший подход для управления строками в реагировать родной

Question

Я новичок в реакции на родную.Я имел дело с этим большим проектом, который содержит слишком много строк, которые можно использовать во многих местах проекта.Поэтому я создал файл strings.js, как в strings.xml для Android, чтобы хранить все строки многократного использования в одном файле, например,

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

, и импортировать всякий раз, когда мне нужно.

Так вот мои вопросы ...

1) Это хороший подход?

2) Есть ли альтернатива этому?

Answer 1

Я предполагаю, что вы используете много строк из-за стиля.Я делаю то же самое, когда пытаюсь извлечь максимальное количество информации о стилях в отдельную папку с разными файлами стилей.Не только переменные, но и сгруппированные стили.

Например:

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
  }

Для стилей текста и общих презентаций это действительно сокращает код и позволяет легко модифицировать только в одном месте.

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

Вы можете использовать response-intl, чтобы играть со строками, датами и числами.который будет предоставлять функции по умолчанию для обработки ваших данных.

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

узнать больше о реаги-intl библиотека

Answer 4

Вам не нужно экспортировать каждое значение.Один лучший способ, который я знаю, это экспортировать

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