react-native-svelte

• 简化 react-native 中的样式编写杂乱的问题

普通用法

• 通过 React 的上下文数据传递，把 Svelte 包裹在 Svelte.Styles 里，然后向 Svelte.Styles 传递 styles 对象，每一个 key 就对应 Svelte 的 id

import Svelte from 'react-native-svelte'
const styles: StylesProps = {
	'app-box': {
		
	}
}

function App() {
  return (
    <Svelte.Styles styles={styles}>
      <Svelte id="app-box">
      </Svelte>
    </Svelte.Styles>
  )
}

响应系统主题

• 当需要做主题切换的时候，就需要拿到 useColorScheme 的参数来判断当前系统的主题，外部不需要再使用 useColorScheme，而是在 styles 样式集合里对应的值里传递一个回调函数，内部将通过回调函数的形式传递参数给外部

import Svelte from 'react-native-svelte'
const styles: StylesProps = {
	'app-box': (scheme) => {
		return {

		}
	}
}

function App() {
  return (
    <Svelte.Styles styles={styles}>
      <Svelte id="app-box">
      </Svelte>
    </Svelte.Styles>
  )
}