Sistema de design React Native Elements.

React Native Elements Ambiente de execução e escopo web do sistema de design

Execute os componentes reais com tema

Este exemplo usa @rneui/themed e @rneui/base na versão 5.0.0, React 19.2.0 e React Native Web 0.21.3. A compilação para navegador associa react-native a react-native-web e seleciona módulos .web.js antes dos módulos genéricos de JavaScript. São componentes reais da biblioteca renderizados na web, não caixas HTML que imitam uma captura de tela de celular. O arquivo de compilação fornecido inclui essa opção de resolução para que o código independente reproduza a prévia.

Mantenha separadas as evidências da web e do ambiente nativo

A composição é um editor de plano de foco, não um cronômetro em funcionamento nem um gerenciador de notificações. SafeAreaProvider envolve a aplicação conforme exigido pela integração, mas este teste no navegador não valida as margens internas do iOS ou Android, o comportamento do teclado nativo nem as permissões de notificação do dispositivo. Além destes exemplos de componentes compartilhados, um projeto nativo precisa de compilação para a plataforma e testes no dispositivo.

• A renderização web usa React Native Web.
• O plano é mantido apenas no estado local de React.
• Nenhum cronômetro, notificação do sistema ou salvamento no back-end é iniciado.

React Native Elements Objetos de tema e cores do sistema de design

Use as funções do tema ativo

createTheme combina as cores claras e escuras integradas com quaisquer substituições explícitas. O exemplo altera apenas os valores padrão dos componentes e o modo. useTheme fornece as cores resolvidas aos elementos View e Text ao redor, para que o título, as descrições e os painéis acompanhem a aparência selecionada. No modo escuro, preto corresponde à função de primeiro plano claro e branco, à função de superfície escura; tratar esses nomes como valores literais de cor comprometeria o tema.

Não invente uma escala tipográfica universal

RNEUI oferece padrões de componentes e opções de personalização, em vez do mesmo modelo de tokens de um sistema de design CSS. Por isso, a referência distingue as entradas reais de defaultSpacing do título de 32px, do texto corrido de 15px e do raio de cartão de 8px do exemplo. Essas dimensões são configurações originais da composição, visíveis no código. Não devem ser descritas como regras obrigatórias da marca React Native Elements.

React Native Elements Validação de entrada e foco do sistema de design

Controle explicitamente o texto da tarefa

Input recebe um valor e um retorno de chamada onChangeText. A ação de manter remove os espaços em branco do valor antes de verificar se ele está vazio. Se estiver vazio, errorMessage exibe uma solicitação específica e a referência do componente devolve o foco ao campo de entrada. Ao alterar o texto, o erro anterior é limpo e a confirmação local é invalidada, evitando que uma mensagem de salvamento obsoleta descreva um plano que já foi editado.

Use o rótulo junto com o erro

O rótulo visível Tarefa de foco e accessibilityLabel identificam o mesmo controle. O texto de exemplo sugere conteúdo, mas não substitui o rótulo. A validação é acionada pela ação explícita de manter, e não a cada tecla pressionada. A pessoa usuária mantém o rascunho após um erro, e nenhuma animação de salvamento assíncrona sugere uma solicitação ao servidor que nunca ocorre.

React Native Elements Seleção controlada do sistema de design

Separe o índice selecionado da duração

ButtonGroup recebe três rótulos, selectedIndex e onPress. O índice retornado seleciona um valor da lista original de minutos [15, 25, 45]; usar esse índice diretamente como quantidade de minutos seria um erro na aplicação. O resumo numérico em destaque da prévia é derivado do mesmo índice selecionado, para que o controle segmentado e o plano legível não apresentem informações divergentes.

Use um booleano real para a opção de pausa

React Native Elements Preservação e redefinição de estado do sistema de design

Mantenha o tema independente do plano

Alterar a aparência chama updateTheme com o modo oposto. A tarefa, a duração selecionada, a configuração de pausa e a confirmação local permanecem no estado da aplicação, fora dessa atualização. Os componentes nativos recebem o novo tema sem reconstruir o plano. O teste no navegador altera a aparência depois que uma tarefa personalizada é inserida, para verificar se o modo visual não fica acidentalmente associado à redefinição dos dados.

Use uma única ação explícita de recuperação

Redefinir o plano restaura a tarefa de exemplo, a duração de 25 minutos e a pausa ativada, além de limpar o erro de validação e remover a confirmação. A aparência selecionada é preservada. Assim, a redefinição do conteúdo fica separada da preferência de tema, sem causar um recarregamento inesperado da página inteira. O exemplo não inclui uma camada de persistência; portanto, ao reabrir o documento, a tarefa de exemplo inicial será exibida.

React Native Elements Composição responsiva do sistema de design

Adapte o layout com dois cartões

O conteúdo usa useWindowDimensions para escolher uma linha acima de 700px e uma coluna em larguras menores. Cada Card não tem margem externa, para que o espaçamento de 24px da composição controle o alinhamento. Em larguras abaixo de 500px, o espaçamento externo diminui para 16px. Os dois cartões apresentam um plano editável e um resumo derivado, em vez de repetir elementos decorativos de preenchimento.

Confira os padrões dos componentes nos dois temas

Os componentes internos do RNEUI podem usar seus próprios estilos padrão além das cores globais. Por exemplo, neste exemplo, os segmentos não selecionados de ButtonGroup mantêm o tratamento de superfície nativo. Um produto que exija outro contraste ou densidade visual pode definir buttonStyle e selectedButtonStyle explicitamente, mas essa decisão deve ser testada, e não atribuída ao tema global automático.

React Native Elements Configuração completa para navegador do sistema de design

Inclua a resolução web e os carregadores de recursos

O build.mjs fornecido usa esbuild com análise de JSX para dependências de JavaScript, alias de react-native-web, prioridade para .web.js e carregadores de dados para recursos PNG e TTF empacotados. O ponto de entrada do pacote inclui exports que fazem referência a esses recursos, mesmo quando a composição visível não contém ícones. Portanto, não é possível substituir esse processo por uma importação simples, no navegador, do código-fonte sem processamento.

Teste toda a interação local

Salve o código-fonte fornecido como rne.jsx e o HTML como index.html, instale os pacotes fixados, execute o build e disponibilize o diretório. Teste uma tarefa vazia, uma tarefa personalizada, uma duração diferente, o controle de pausa, a aparência e a redefinição. Isso comprova a composição fornecida; não valida automaticamente todos os componentes RNEUI exportados nem todas as plataformas nativas.

1. Mantenha os três arquivos fornecidos no mesmo diretório.
2. Instale as dependências fixadas e execute node build.mjs.
3. Disponibilize o pacote gerado com index.html.
4. Teste os estados vazio, editado, com tema e redefinido.

Exemplos de componentes do sistema de design React Native Elements

import React,{useState,useRef} from 'react';
import {createRoot} from 'react-dom/client';
import {View,Text,useWindowDimensions} from 'react-native';
import {ThemeProvider,createTheme,Button,ButtonGroup,Input,Switch,Card,Divider,useTheme} from '@rneui/themed';
import {SafeAreaProvider} from 'react-native-safe-area-context';
const theme=createTheme({mode:'light',components:{Button:{radius:6},Input:{containerStyle:{paddingHorizontal:0}}}});
function App(){const {theme,updateTheme}=useTheme();const {width}=useWindowDimensions();const [title,setTitle]=useState('Read a chapter'),[duration,setDuration]=useState(1),[breaks,setBreaks]=useState(true),[error,setError]=useState(false),[saved,setSaved]=useState('');const input=useRef(null);let c=theme.colors;function changed(){setSaved('')}function save(){if(!title.trim()){setError(true);input.current?.focus();return;}setError(false);setSaved(`${title.trim()} · ${[15,25,45][duration]} minutes · ${breaks?'with a short break':'no break reminder'}. Kept in this preview only.`)}return <View style={{backgroundColor:c.background,padding:width<500?16:32,maxWidth:1000,width:'100%',alignSelf:'center'}}><View style={{flexDirection:'row',justifyContent:'space-between',gap:24,flexWrap:'wrap',marginBottom:24}}><View style={{flexShrink:1}}><Text style={{color:c.primary,fontSize:13,fontWeight:'700'}}>REACT NATIVE ELEMENTS · WEB STUDY</Text><Text accessibilityRole="header" style={{fontSize:32,fontWeight:'700',color:c.black,marginTop:12}}>Make room for one thing</Text></View><Button title={theme.mode==='light'?'Use dark theme':'Use light theme'} type="outline" onPress={()=>updateTheme({mode:theme.mode==='light'?'dark':'light'})}/></View><Text style={{color:c.grey1,fontSize:15,lineHeight:23}}>An original focus-plan composer using RNEUI 5.0.0 through React Native Web. No timer or system notification is started.</Text><View style={{flexDirection:width>700?'row':'column',gap:24,marginTop:24}}><Card containerStyle={{flex:1,margin:0,padding:24,borderRadius:8}}><Card.Title>Shape your focus block</Card.Title><Card.Divider/><Input ref={input} label="Focus task" accessibilityLabel="Focus task" value={title} onChangeText={v=>{setTitle(v);setError(false);changed()}} errorMessage={error?'Enter a task before keeping this plan.':''} placeholder="What deserves your attention?"/><Text style={{fontSize:16,fontWeight:'700',color:c.grey1,marginBottom:8}}>Duration</Text><ButtonGroup buttons={['15 min','25 min','45 min']} selectedIndex={duration} onPress={i=>{setDuration(i);changed()}} containerStyle={{marginHorizontal:0,height:48,marginBottom:24}}/><View style={{flexDirection:'row',justifyContent:'space-between',alignItems:'center',gap:16,marginBottom:24}}><Text style={{fontSize:16,color:c.black,flexShrink:1}}>Include a short break</Text><Switch value={breaks} onValueChange={v=>{setBreaks(v);changed()}} accessibilityLabel="Include a short break"/></View><Button title="Keep this plan" onPress={save}/></Card><Card containerStyle={{flex:1,margin:0,padding:24,borderRadius:8}}><Card.Title>Your local plan</Card.Title><Card.Divider/><Text style={{fontSize:48,fontWeight:'700',color:c.primary}}>{[15,25,45][duration]}</Text><Text style={{fontSize:16,color:c.grey1,marginBottom:24}}>minutes for {title.trim()||'your next task'}</Text><Divider/><Text style={{color:c.black,fontSize:16,lineHeight:25,marginVertical:24}}>{breaks?'Finish with a pause before choosing what comes next.':'Keep the end of this block open; no break reminder is included.'}</Text><Text style={{fontSize:13,lineHeight:21,color:c.grey2}}>The duration, task and break choice are original application state. Theme colors, Input, ButtonGroup, Switch, Card and Button come from the installed library.</Text></Card></View><Text accessibilityLiveRegion="polite" style={{color:c.black,fontSize:15,lineHeight:23,marginTop:24}}>{saved}</Text><Button title="Reset the plan" type="clear" onPress={()=>{setTitle('Read a chapter');setDuration(1);setBreaks(true);setError(false);setSaved('');}} containerStyle={{alignSelf:'flex-start',marginTop:8}}/></View>}
createRoot(document.getElementById('root')).render(<SafeAreaProvider><ThemeProvider theme={theme}><App/></ThemeProvider></SafeAreaProvider>);

import {build} from 'esbuild';
await build({entryPoints:['rne.jsx'],bundle:true,minify:true,outfile:'rne.bundle.js',alias:{'react-native':'react-native-web'},resolveExtensions:['.web.js','.js','.jsx','.json'],loader:{'.js':'jsx','.ttf':'dataurl','.png':'dataurl'},define:{'process.env.NODE_ENV':'"production"'}});

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Focus plan composer</title><style>body{margin:0;background:#f4f7fa}*{box-sizing:border-box}input:focus-visible,[role=button]:focus-visible{outline:2px solid #2089dc;outline-offset:3px}</style></head><body><div id="root"></div><script src="./rne.bundle.js"></script></body></html>