реагировать на собственные стили применения ко всем текстовым компонентам

Есть ли простой способ применить стили ко всем компонентам определенного типа, например Text или ScrollView и т. Д., Чтобы реагировать на создание шаблонов?
Например, я хочу использовать стиль verdanafontFamily для всех компонентов текста во всех сценах. Есть ли простой способ достичь, чем определять стиль каждый раз, когда я использую компонент Text?
Или требуется создание настраиваемого компонента Text? и использовать его вместо основного компонента, например, ниже. Используйте MyText вместо Textреагировать на собственные стили применения ко всем текстовым компонентам

const MyText = ({data}) => <Text style={style.commonTextStyle}>{data}</Text>

источник

2016-12-10 suman j

Вы можете извлечь общие стили и обеспечить их как глобальные. вы можете добавлять/редактировать стили для каждого текстового поля, если это необходимо.

export default StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
    welcome: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10, 
    }, 
})

Тогда и можно использовать <Text style={[styles.welcome, {color:'red'}]]}>Hello</Text>

U должны смотреть в LIBS как react-native-extended-stylesheet

Вы также можете выполнить следующие методы, как сохранить таблицу стилей простой и readble.
См Tips for styling React

источник

2016-12-11 06:57:49 Vicky

Это не поможет с моим спросить.Каждому пользователю необходимо обеспечить правильные стили во всей базе кода, когда используется компонент Text. Я просил об общем решении, таком как предоставление CSS в HTML для определенного тега. Кажется, единственным решением является создание настраиваемого компонента, такого как MyText, как я упоминал в вопросе. –

@sumanj вы можете принять мой ответ или ввести его сами, чтобы отметить этот вопрос и помочь другим, кто сталкивается с той же проблемой? – eden

В дополнение к ответу Викки, вы можете просто создать новый компонент с именем Text или MYTEXT и т.д., и импортировать его в проект, когда вам это нужно.

function MyText(props) { 
    return (
    <Text style={styles.MY_CUSTOM_STYLES}> 
     {props.children} 
    </Text> 
); 
}

И использовать его как,

import MyText from '/path/to/MyText'; 

... 

render() { 
    return (<MyText>Now I have my custom styles.</MyText>); 
}

Вы можете использовать его как импортировать текст, изменив его имя, если вы чувствуете, так привыкли к определению компонентов текста. Для дальнейшего чтения см. this documentation. (Обратите внимание, что: MyText компонент выше, является functional stateless component для легких определений.)

источник

2016-12-11 07:57:37 eden

Вы должны создать RN компонент, как это:

/* @flow */ 

import React, { Component } from 'react'; 
import { Text as TextRN } from 'react-native'; 

export default class Text extends Component { 
    render() { 
    return (
     <TextRN style={[YOUR_CUSTOM_STYLES, this.props.style]}> 
     {this.props.children} 
     </TextRN> 
    ) 
    } 
}

Таким образом, собственный компонент Текста может наследование дополнительных стилей где бы вы их ни использовали.

Примечание: Имейте в виду, что ваш собственный компонент текста не может использоваться во всех случаях, например. внутри TouchableHighlight, в этом случае вы должны использовать собственный текст из интерактивной библиотеки.

Теперь, вы можете просто изменить параметры импорта для:

import Text from 'YOUR_PATH/Text.js'

Надеется, что это помогает.

источник

2017-04-12 15:45:45

https://github.com/Ajackster/react-native-global-props, кажется, предлагает глобальные стили для большинства реагирующих нативных компонентов, включая Text, View и т. Д. В Readme из GitHub есть примеры. Похоже, это касается необходимости, но я еще не тестировал это.

источник

2017-09-25 02:52:12

Glamorous также обрабатывает это очень чисто в React Native:

const MyText = glamorous.Text({ 
    // ... any styles 
}); 

export MyText;

источник

2017-11-30 17:21:33

реагировать на собственные стили применения ко всем текстовым компонентам

ответ

Смежные вопросы