Shoutem UI是一个全面的UI库，提供了各种各样的UI组件和设计模式，包括按钮、卡片、表单、图标等。该库提供了多种主题样式，可以轻松地将应用程序的外观与不同风格的设计保持一致。

Shoutem UI还具有出色的可定制性，可以根据开发人员的需求进行修改。此外，Shoutem UI还提供了与其他UI库的兼容性。

安装

npm install --save @shoutem/theme

例子

使用Shoutem UI（一组可根据主题自定义的组件）来查看如何使用它。

创建新的React Native项目：

react-native init HelloWorld

安装@shoutem/ui和@shoutem/theme，并将它们链接到项目中：

cd HelloWorld
npm install --save @shoutem/ui
npm install --save @shoutem/theme
rnpm link

现在，只需将以下内容复制到React Native项目的App.js文件中：

import React, { Component } from 'react';
import { Dimensions } from 'react-native';
import { StyleProvider } from '@shoutem/theme';
import { Card,Image,View,Subtitle,Caption} from '@shoutem/ui';
const window = Dimensions.get('window');
const Colors = {
  BACKGROUND: '#ffffff',
  SHADOW: '#000000',
};
const MEDIUM_GUTTER = 15;
const theme = {
  'shoutem.ui.View': {
    '.h-center': {
      alignItems: 'center',
    },
    '.v-center': {
      justifyContent: 'center',
    },
    '.flexible': {
      flex: 1,
    },
    flexDirection: 'column',
  },
  'shoutem.ui.Card': {
    'shoutem.ui.View.content': {
      'shoutem.ui.Subtitle': {
        marginBottom: MEDIUM_GUTTER,
      },
      flex: 1,
      alignSelf: 'stretch',
      padding: 10,
    },
    width: (180 / 375) * window.width,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'flex-start',
    backgroundColor: Colors.BACKGROUND,
    borderRadius: 2,
    shadowColor: Colors.SHADOW,
    shadowOpacity: 0.1,
    shadowOffset: { width: 1, height: 1 },
  },
  'shoutem.ui.Image': {
    '.medium-wide': {
      width: (180 / 375) * window.width,
      height: 85,
    },
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: Colors.BACKGROUND,
  },
};

export default class App extends Component<{}> {
  render() {
    return (
      <StyleProvider style={theme}>
        <View styleName="flexible vertical v-center h-center">
          <Card>
            <Image
              styleName="medium-wide"
              source={{ uri: 'http://shoutem.github.io/img/ui-toolkit/examples/image-12.png' }}
            />
            <View styleName="content">
              <Subtitle numberOfLines={4}>
                Lady Gaga Sings National Anthem at Super Bowl 50
              </Subtitle>
              <Caption>21 hours ago</Caption>
            </View>
          </Card>
        </View>
      </StyleProvider>
    );
  }
}

最后，运行应用程序！

react-native run-ios

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://web.fly63.com/nav/3965