Jetpack Compose

使用 @expo/ui 构建原生 Android 界面的 Jetpack Compose 组件。

Android

GitHub

npm

更新日志

Recommended version:

~0.2.0-beta.9

重要此库目前处于 alpha 阶段，并且会经常发生破坏性变更。它在 Expo Go 应用中不可用——请使用开发构建来试用。

@expo/ui/jetpack-compose 中的 Jetpack Compose 组件允许你使用来自 React Native 的 Jetpack Compose 构建完全原生的 Android 界面。

安装

Terminal

- npx expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

组件

Button

import { Button } from '@expo/ui/jetpack-compose';

<Button
  style={{ flex: 1 }}
  variant="default"
  onPress={() => {
    setEditingProfile(true);
  }}>
  编辑个人资料
</Button>

另请参阅：Jetpack Compose 官方文档

CircularProgress

import { CircularProgress } from '@expo/ui/jetpack-compose';

<CircularProgress progress={0.5} style={{ width: 300 }} color="blue" elementColors={{ trackColor: '#cccccc' }} />

另请参阅：Jetpack Compose 官方文档

ContextMenu

注意：也称为 DropdownMenu。

import { ContextMenu } from '@expo/ui/jetpack-compose';

<ContextMenu style={{ width: 150, height: 50 }}>
  <ContextMenu.Items>
    <Button
      elementColors={{ containerColor: '#0000ff', contentColor: '#00ff00' }}
      onPress={() => console.log('Pressed1')}>
      你好
    </Button>
    <Button
      variant="bordered"
      color="#ff0000"
      onPress={() => console.log('Pressed2')}>
      我喜欢它
    </Button>
    <Picker
      label="Doggos"
      options={['very', 'veery', 'veeery', 'much']}
      variant="menu"
      selectedIndex={selectedIndex}
      onOptionSelected={({ nativeEvent: { index } }) => setSelectedIndex(index)}
    />
  </ContextMenu.Items>
  <ContextMenu.Trigger>
    <Button variant="bordered" style={{ width: 150, height: 50 }}>
      显示菜单
    </Button>
  </ContextMenu.Trigger>
</ContextMenu>

另请参阅：Jetpack Compose 官方文档

Chip

import { Chip } from '@expo/ui/jetpack-compose';

// 带图标的辅助芯片
<Chip
  variant="assist"
  label="书籍"
  leadingIcon="filled.Add"
  onPress={() => console.log('正在打开航班预订...')}
/>

// 带选择功能的筛选芯片
<Chip
  variant="filter"
  label="图片"
  leadingIcon="filled.Star"
  selected={selectedFilters.includes('Images')}
  onPress={() => handleFilterToggle('Images')}
/>

// 可关闭的输入芯片
<Chip
  variant="input"
  label="工作"
  leadingIcon="filled.Create"
  onDismiss={() => handleInputDismiss('Work')}
/>

// 建议芯片
<Chip
  variant="suggestion"
  label="附近"
  leadingIcon="filled.LocationOn"
  onPress={() => console.log('正在搜索附近...')}
/>

另请参阅：Jetpack Compose 官方文档

DateTimePicker (日期)

import { DateTimePicker } from '@expo/ui/jetpack-compose';

<DateTimePicker
  onDateSelected={date => {
    setSelectedDate(date);
  }}
  displayedComponents='date'
  initialDate={selectedDate.toISOString()}
  variant='picker'
/>

另请参阅：Jetpack Compose 官方文档

DateTimePicker (时间)

import { DateTimePicker } from '@expo/ui/jetpack-compose';

<DateTimePicker
  onDateSelected={date => {
    setSelectedDate(date);
  }}
  displayedComponents='hourAndMinute'
  initialDate={selectedDate.toISOString()}
  variant='picker'
/>

另请参阅：Jetpack Compose 官方文档

LinearProgress

import { LinearProgress } from '@expo/ui/jetpack-compose';

<LinearProgress progress={0.5} style={{ width: 300 }} color="red" />

另请参阅：Jetpack Compose 官方文档

Picker (单选)

import { Picker } from '@expo/ui/jetpack-compose';

<Picker
  options={['$', '$$', '$$$', '$$$$']}
  selectedIndex={selectedIndex}
  onOptionSelected={({ nativeEvent: { index } }) => {
    setSelectedIndex(index);
  }}
  variant="radio"
/>

另请参阅：Jetpack Compose 官方文档

Picker (分段)

import { Picker } from '@expo/ui/jetpack-compose';

<Picker
  options={['$', '$$', '$$$', '$$$$']}
  selectedIndex={selectedIndex}
  onOptionSelected={({ nativeEvent: { index } }) => {
    setSelectedIndex(index);
  }}
  variant="segmented"
/>

另请参阅：Jetpack Compose 官方文档

Slider

import { Slider } from '@expo/ui/jetpack-compose';

<Slider
  style={{ minHeight: 60 }}
  value={value}
  onValueChange={(value) => {
    setValue(value);
  }}
/>

另请参阅：Jetpack Compose 官方文档

Switch (切换)

注意：也称为 Toggle。

import { Switch } from '@expo/ui/jetpack-compose';

<Switch
  value={checked}
  onValueChange={checked => {
    setChecked(checked);
  }}
  color="#ff0000"
  label="播放音乐"
  variant="switch"
/>

另请参阅：Jetpack Compose 官方文档

Switch (复选框)

import { Switch } from '@expo/ui/jetpack-compose';

<Switch
  value={checked}
  onValueChange={checked => {
    setChecked(checked);
  }}
  label="播放音乐"
  color="#ff0000"
  variant="checkbox"
/>

另请参阅：Jetpack Compose 官方文档

TextInput

import { TextInput } from '@expo/ui/jetpack-compose';

<TextInput autocorrection={false} defaultValue="单行文本输入" onChangeText={setValue} />

另请参阅：Jetpack Compose 官方文档

API

完整文档尚不可用。请使用 TypeScript 类型来探索该 API。

// 从 Jetpack Compose 包导入
import { Button } from '@expo/ui/jetpack-compose';