标签: react-native-stylesheet

我怎样才能在本机反应中实现这一点？

到目前为止，我有这个，我想实现中间曲线。我不知道是用透明视图处理它还是完全切换到 SVG

这是tabBar组件

/* eslint-disable react/prop-types */
import React, { Component } from 'react'
import { TouchableOpacity, Text, StyleSheet, View } from 'react-native'
import { Colors } from 'App/Theme'

export default class TabBar extends Component {
  render() {
    let {
      renderIcon,
      getLabelText,
      activeTintColor,
      inactiveTintColor,
      onTabPress,
      onTabLongPress,
      getAccessibilityLabel,
      navigation,
      showLabel,
    } = this.props

    let { routes, index: activeRouteIndex } = navigation.state

    return (
      <View style={styles.tabBar}>
        {routes.map((route, routeIndex) => {
          let isRouteActive = routeIndex === activeRouteIndex
          let tintColor = …

我正在尝试直接从样式访问 useTheme() 但到目前为止我的解决方案似乎不起作用。我没有返回错误。有办法做我想做的事吗？

 import { StyleSheet } from "react-native";

    import { useTheme } from '@react-navigation/native'
    
    export default function () {
            const { colors } = useTheme();
            const styles = GlobalStyles({ colors: colors })
            return styles
        }
        
        const GlobalStyles = (props) => StyleSheet.create({
        
            container: {
                flex: 1,
                backgroundColor: props.colors.backgroundColor,
        
            },
        })

访问组件中的样式

 import React from "react";
import GlobalStyles from "../globalStyles.js"
    
    class Inventory extends React.Component {
    
    render() {
    
            return (
                <View style={globalStyles.container}>
            )
    
     }

如何在图像中制作边框底部半径？

以及如何将图像屏蔽到绿色区域？

我已经尝试了以下代码，但我无法在上面共享的图像中获得半径比

查看代码：

<View style={styles.wrapper}>
    <View style={styles.welcomeWrapper}>
        <View style={styles.welcomeImageWrapper}>
            <Image style={{width:'100%'}} source={require('../assets/images/test-slide.jpg')}/>
        </View>
    </View>
    <View style={{
        height: 100,
        backgroundColor: colors.white,
        justifyContent: 'flex-end',
        alignItems: 'center'
    }}>
       <Text style={{marginBottom:50,fontSize:18,fontFamily:'Montserrat-Regular'}}>Deneme Text </Text>
    </View>
</View>

样式代码：

wrapper:{
    flex:1,
    display: 'flex',
    backgroundColor:colors.white,
},
welcomeWrapper:{
    flex:1,
    justifyContent:'center',   
    backgroundColor:colors.green01,
    overflow: 'hidden',
    position:'relative',
    width:'100%',
    borderBottomRightRadius:Dimensions.get('window').width/100*50,
    borderBottomLeftRadius:Dimensions.get('window').width/100*50,
},

在这个小吃中，我尝试在屏幕中央放置 3 张卡片，并使用水平 FlatList 并启用分页以跳转到滚动时的下 3 张卡片。

但是布局在滚动后开始被破坏，并且下一张/上一张卡片的一些像素出现在视图中。

我应该如何设置此列表的样式，使其始终在屏幕中央恰好有 3 张卡片，并且滚动将跳转到包含接下来 3 张卡片的下一页？或者像 GooglePlay 商店一样，上一张/下一张卡片的固定像素在主 3 张卡片的左侧和右侧可见。（下面的示例截图）

 <View style={{flex:1,justifyContent: \'center\', marginLeft: 5, marginRight: 5,}}>\n      <FlatList\n        horizontal\n        pagingEnabled\n        data={data}\n        keyExtractor={(item) => `\xc3\xactem-${item}`}\n        renderItem={({ item }) => (\n          <Card style={{width:Dimensions.get("window").width/3-5,marginRight:5}}>\n            {/* some content */}\n          </Card>\n        )}\n      />\n </View>\n

我不需要像snap-carousel这样的图书馆......

我正在尝试将宽度参数传递到样式表中，如下所示：

      <View style={styles.children(width)}>{children}</View>

并像这样使用它：

 
const styles = StyleSheet.create({
  modalContent: {
    flex: 1,
    justifyContent: 'center',
    margin: '5%',
  },
  modalOverlay: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
  children: (width: any) => ({
    width: width,
    backgroundColor: 'white',
    position: 'absolute',
    bottom: 0,
    borderTopRightRadius: 40,
    borderTopLeftRadius: 40,
    paddingVertical: 30,
    paddingHorizontal: 20,
  }),
});
,

但是打字稿抛出错误This expression is not callable. No constituent of type 'ViewStyle | TextStyle | ImageStyle' is callable.

我该如何解决这个打字稿问题？

我有一个这样的图像作为资产seats.png（180 x 36 像素），每个“座位”是一个 36x36 像素的图像：

我的代码：

<View style={styles.container}>
      <ImageBackground 
      style={styles.redSeat}
      source={seatsPng}
      resizeMode="cover"
      >
      </ImageBackground>
</View>

import EStyleSheet from 'react-native-extended-stylesheet';

export default EStyleSheet.create({
  container: {
    backgroundColor: '#333',
    paddingTop: 10,
    paddingBottom: 10,
    paddingLeft: 10,
    paddingRight: 10,
  },
  redSeat: {
    width: 36, 
    height: 36,
    left: 0 // I want to show only red seat on the display
  }
});

如何使它可以显示红色座位、黄色座位或紫色座位，只需调整图像偏移量，如 HTML/CSS 中的背景位置？上面的代码只显示一个绿色的座位。

PS：我搜索了 React-native GitHub 页面，我不敢相信这个问题被标记为关闭而开发人员没有解决方案。因此，如果将来可能有解决方案，我将打开此线程。https://github.com/facebook/react-native/issues/12347

我正在制作一个应用程序来阅读古兰经，使用本机反应（世博会）。我在格式化文本时遇到一些问题。

问题：

• 随机间距
• 自动调整文字大小
• 文本最后在左侧对齐。

这是我的代码：

function Read(){
    return (
    <SafeAreaView style={styles.container}>
      <HeaderSurahScreen navigation={navigation} route={route} />
      <Divider
        orientation="vertical"
        width={5}
        style={{ borderBottomColor: "#545353" }}
      />

      {/* create a logic here to display tranlition or arabic */}
      <ScrollView style={styles.scroll}>
        <Text style={styles.surahPage} adjustsFontSizeToFit>
          {surah &&
            surah.map((ayat, index) => (
              <Text key={index} allowFontScaling={false} selectable={true}>
                <Text selectable={true} style={styles.ayat}>
                  {ayat.text}
                </Text>
                <Text style={styles.number}>{toArabic(ayat.id)}&#1757;</Text>
              </Text>
            ))}
        </Text>
      </ScrollView>
      <StatusBar style="auto" />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: DEFAULT_BACKGROUND_COLOR_THEME,
  },
  scroll: { …

在反应原生默认情况下，当我使用一些大字体大小时，我得到了垂直间距。我尝试过lineHeight，但在给出精确的 lineHeight 等于 fontSize 后，它只是从顶部而不是从底部删除间距。我添加了边框以查看差异。

<Text 
    style={{
            fontSize: 40,
            lineHeight: 40, 
            textTransform: 'uppercase',
            borderWidth: 1
    }}
>
      Account
</Text>

我想从顶部和底部添加一些固定边距，但额外的空间会增加并在元素之间产生更多间隙。我不知道这个间距是多少，所以我可以从原始边距中添加/减去它。

注意：我现在只是在安卓上做。

我是 react-native 的新手，我想在 react-native 中实现以下设计

• 蓝色圆圈是选择日期的滑块（日期选择器）
• 当日期更改时，滑块（日期选择器）内的圆圈会更改颜色
• 最后是圆圈内的图像。

如果有人可以提供参考链接或我可以用来创建图像中显示的设计的库，那就太好了。

提前致谢。

我想将自定义样式添加到我的选项卡导航器中。我尝试过使用style:{}内部screenOptions但样式不起作用。只有内置样式道具才起作用。这是我的代码：

import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

import Home from './Home'
import Create from './Create'
import Messages from './Messages'
import Forum from './Forum'
import Profile from './Profile'
import LottieView from "lottie-react-native";
import Icon from 'react-native-vector-icons/Feather';

const Tabs = createBottomTabNavigator();

export default function App() {
    return (

        <Tabs.Navigator

            screenOptions={({ route }) => ({
                tabBarShowLabel: false,
                tabBarHideOnKeyboard: true,
                style: {
                    borderRadius: 15,
                    height: 90,
                },
                tabBarIcon: ({ focused, color, size }) => {
                    let …