Jetpack 组合

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

Android

Bundled version:

~0.2.0-beta.9

重要该库目前处于 alpha 版本，并且会经常发生重大更改。它在 Expo Go 应用中不可用 — 请使用开发版本来试用。

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

🌐 The Jetpack Compose components in @expo/ui/jetpack-compose allow you to build fully native Android interfaces using Jetpack Compose from React Native.

安装

🌐 Installation

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.

组件

🌐 Components

按钮

🌐 Button

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

<Button
  style={{ flex: 1 }}
  variant="default"
  onPress={() => {
    setEditingProfile(true);
  }}>
  Edit profile
</Button>

CircularProgress

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

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

ContextMenu

注意: 也称为下拉菜单。

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')}>
      Hello
    </Button>
    <Button
      variant="bordered"
      color="#ff0000"
      onPress={() => console.log('Pressed2')}>
      Love it
    </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 }}>
      Show Menu
    </Button>
  </ContextMenu.Trigger>
</ContextMenu>

芯片

🌐 Chip

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

// Assist chip with icon
<Chip
  variant="assist"
  label="Book"
  leadingIcon="filled.Add"
  onPress={() => console.log('Opening flight booking...')}
/>

// Filter chip with selection
<Chip
  variant="filter"
  label="Images"
  leadingIcon="filled.Star"
  selected={selectedFilters.includes('Images')}
  onPress={() => handleFilterToggle('Images')}
/>

// Input chip with dismiss
<Chip
  variant="input"
  label="Work"
  leadingIcon="filled.Create"
  onDismiss={() => handleInputDismiss('Work')}
/>

// Suggestion chip
<Chip
  variant="suggestion"
  label="Nearby"
  leadingIcon="filled.LocationOn"
  onPress={() => console.log('Searching nearby...')}
/>

DateTimePicker（日期）

🌐 DateTimePicker (date)

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

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

DateTimePicker (时间)

🌐 DateTimePicker (time)

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

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

LinearProgress

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

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

选择器（单选按钮）

🌐 Picker (radio)

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

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

选择器（分段）

🌐 Picker (segmented)

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

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

滑块

🌐 Slider

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

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

开关（切换）

🌐 Switch (toggle)

注意: 也称为切换。

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

<Switch
  value={checked}
  onValueChange={checked => {
    setChecked(checked);
  }}
  color="#ff0000"
  label="Play music"
  variant="switch"
/>

开关（复选框）

🌐 Switch (checkbox)

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

<Switch
  value={checked}
  onValueChange={checked => {
    setChecked(checked);
  }}
  label="Play music"
  color="#ff0000"
  variant="checkbox"
/>

TextInput

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

<TextInput autocorrection={false} defaultValue="A single line text input" onChangeText={setValue} />

应用接口

🌐 API

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

🌐 Full documentation is not yet available. Use TypeScript types to explore the API.

// Import from the Jetpack Compose package
import { Button } from '@expo/ui/jetpack-compose';