标签: react-native-stylesheet

我需要将两个Text不同的组件fontSize连续对齐并垂直居中。我现在关注https://snack.expo.io/@troublediehard/dmVuZ2

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.row}>
          <Text style={styles.text1}>Font size 20</Text>
          <Text style={styles.text2}>Font size 14</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  row: {
    flexDirection: 'row',
    backgroundColor: 'red',
  },
  text1: {
    fontSize: 20,
    backgroundColor: 'blue',
  },
  text2: {
    fontSize: 14,
    backgroundColor: 'green',
  },
});

我将颜色作为 props.color 导入到我的功能组件中，并将其设置为状态“tagColor”。当我在样式表中使用 tagColor 作为值来设置背景颜色时，我收到错误“找不到变量 tagColor”

如何在样式表中使用变量？

const Tag = (props) => {
  
  const [tagColor, setColor] = useState(props.color)

  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.tag} title='tag'>
           
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: "center",
    justifyContent: "center",
    height: 25,
    display: 'flex'
  },
  tag: {
    backgroundColor: tagColor,  
}
});

export default Tag;

这篇文章非常接近，但我确实有不同的情况：How to Horizo​​ntally Center React Native Flexbox Text that Wraps across Multiple Lines

我正在尝试像这样设计我的文本样式：为了让两种不同的文本样式像我读到的那样换行到第二行，我必须将它们两个换行到一个<Text>容器中，如下所示：

<Text style={textAlign="center"}>
   <Text style={[ {color: colors.mustardYellow, fontSize: 30, textAlign:"center"}, textStyles.Bold]}>Hey! </Text>
   <Text style={[ {color: colors.white, fontWeight: "100", fontSize: 30, textAlign:"center"}]}>How are you feeling today?</Text>
</Text>

这有效并让第二个文本组件包裹在第一个文本组件下面。然而，它拒绝在第二行水平居中。我尝试在更大的<text>组件容器周围添加另一个容器，但也没有找到任何成功。我能够使其工作的唯一方法是创建 3 个单独的文本组件，一个用于黄色文本，第二个用于第一行的“你好吗”，最后一个用于“今天的感觉？” 在我能够水平居中的第二行。这是一种糟糕的做事方式，我确信有一个正确的方法，但我一生都找不到它。

任何帮助将不胜感激！

这是sectionList用于连续显示事件名称的RN (0.59) 组件。在renderItem连续呈现3个项目，从前端图像（左图），那么事件名称，与另一头的图像（右图）结束。

render() {
       return (
        <View  style={styles.container}>
          <SectionList
              sections={this.state.activeEvents} 
              renderItem={({item, section}) => {return (
                                                <View style={styles.container}>
                                                  <Image style={styles.image} source={{uri: item.image}}/>
                                                  <TouchableOpacity onPress={() => {this._onPress(item.id)}} >
                                                    <Text style={styles.item} key={item.id}>{item.name}</Text>
                                                  </TouchableOpacity>
                                                  <View style={styles.containerRight}>
                                                    <Image style={styles.image} source={{uri: "https://bootdey.com/img/Content/avatar/avatar1.png"}}/>
                                                  </View>
                                                </View>)}}

              renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
              keyExtractor={(item, index) => item + index}
            />
        </View>
      ); 

      }

}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      paddingTop: 22,
      paddingVertical: 12,
      flexDirection: 'row',
      alignItems: 'flex-start',
      flexDirection: 'row',
      alignItems: 'flex-start'
    },
    containerRight: …

我正在尝试制作一个搜索屏幕，我有一个 FlatList 填充屏幕中所有未使用的空间，并具有将填充设置为 10 的样式。我现在有硬编码数据只是为了测试它在什么时候看起来像我一直向下滚动，最后一个文本元素被切成两半......如果我删除填充它会正确显示最后一个项目，但文本显示粘在 FlatList 的边框上，并向每个 FlatList 项目添加填充看起来像矫枉过正（正如有人在另一篇文章中建议的那样）。

导入屏幕.js：

const results = [
    'asdasdasd',
    'dasd cxzceewrw',
    'rewr',
    'jyuyjkyuj ky',
    'iuyiuyiyuiuyiyuiyu',
    'uyigfhg gerte ert',
    'tert ert r ert',
    'asdasdasd',
    'dasd cxzceewrw',
    'rewr',
    'jyuyjkyuj ky',
    'iuyiuyiyuiuyiyuiyu',
    'uyigfhg gerte ert',
    'tert ert r ert',
    'asdasdasd',
    'dasd cxzceewrw',
    'rewr',
    'jyuyjkyuj ky',
    'iuyiuyiyuiuyiyuiyu',
    'uyigfhg gerte ert',
    'tert ert r ert',
    'asdasdasd',
    'dasd cxzceewrw',
    'rewr',
    'jyuyjkyuj ky',
    'iuyiuyiyuiuyiyuiyu',
    'uyigfhg gerte ert',
    'tert ert r ert',
    'dasd cxzceewrw',
    'rewr',
    'jyuyjkyuj ky',
    'iuyiuyiyuiuyiyuiyu',
    'uyigfhg gerte ert',
    'tert …

我想在StyleSheet.create的参数对象中重用样式，该怎么做？

看代码：

const styles = StyleSheet.create({
  style1: {
    color: "red",
    backgroundColor: "white"
  },
  style2: {
    width: 100,
    ...style1
  }
})

最初，我想style2继承 allcolor和backgroundColorfrom style1，并扩展 1 个名为width. 所以我确实尝试了上面的代码，但是它得到了一个错误“style1 未声明”。我意识到了这个问题，所以我替换...style1为...this.style1，错误消失了，但它没有按我预期的那样工作。我想知道为什么并尝试在 javascript 中运行此代码段来测试行为：

const styles = StyleSheet.create({
  style1: {
    color: "red",
    backgroundColor: "white"
  },
  style2: {
    width: 100,
    ...style1
  }
})

它得出了结果undefined，事实并非如此styles.style1。我再次意识到这个问题，用 替换inherit: this.style1后inherit: styles.style1，javascript 代码段有效，但在 React Native 代码中 …

我试图为我的自定义卡片组件提供阴影，但阴影会减少视图，如下所示：

这是我的代码

import React from 'react'
import { View, StyleSheet, Text, Image, Dimensions } from 'react-native'

const { width } = Dimensions.get('window')

export default function CardCus() {
    return (
        <View style={{
            justifyContent: 'center', alignItems: 'center', padding: 10
        }}>

            <View style={styles.container}>
                <View style={{ width: 110, borderTopLeftRadius: 10, borderBottomLeftRadius: 10, }}>
                    <Image style={{ width: '100%', height: '100%', borderTopLeftRadius: 10, borderBottomLeftRadius: 10 }} source={{ uri: 'https://images.pexels.com/photos/6231818/pexels-photo-6231818.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940' }} />
                </View>
                <View style={{ margin: 10, padding: 5 }}>
                    <Text style={styles.title}>Title</Text>
                    <Text>Separator</Text>
                    <Text>Title</Text>
                    <Text>Title</Text>
                </View>
            </View> …

如何在样式表中使用 useWindowDimensions。它始终只在函数内部起作用。我想在本机反应中使用样式表内的 useWindowDimensions 来获取屏幕高度和宽度。

我想在屏幕中间显示我的本机模式，即使我已经完成了样式，但窗口显示在我的屏幕顶部而不是屏幕中心。这是我迄今为止尝试过的：

 <Modal animationType = {"slide"} transparent = {true}
        style={styles.modal}
               visible = {this.state.modalVisible}
               onRequestClose = {this.closeModal}>

               <View style={{justifyContent: 'center', backgroundColor: '#ffff', margin: 0, 
          alignItems: 'center'}}>
                  <Text >Enter Email</Text>
                  <TextInput
              underlineColorAndroid='transparent'
              onChangeText={(email) => this.setState({email})}/>
              <Text>Enter Password</Text>
              <TextInput 
              secureTextEntry={true}
              underlineColorAndroid='transparent'
              onChangeText={(password) => this.setState({password})}/>
                  <TouchableHighlight onPress = {() => {
                     this.toggleModal(!this.state.modalVisible)}}>
                     <Text >Close</Text>
                  </TouchableHighlight>
               </View>
            </Modal>

这是模态样式：

const styles = StyleSheet.create({
      modal:{
          position:"relative",
        width: 250, 
        height: 100,
        backgroundColor: '#FFF',
        justifyContent: 'center',
        alignSelf: 'center',
      }
});

我有一个容器View，它的高度是静态的，可以说50：

container: {
  width: '100%',
  height: 50,
}

现在，此容器有一个孩子，通过将其高度设置为，可以占据整个父对象的高度100%：

child: {
  height: 100%,
}

我希望此子元素是理想的正方形，并且宽度会自动与它的高度相同，因此，如果明天我将父元素的高度更改为60，那么子元素的高度会自动增长（由于height: 100%），但是如何设置其宽度以适合自己自动吗？width: 'auto'没有任何效果..

游乐场：https : //snack.expo.io/SkSWxPKbZ

在我的React Native应用程序中，我有一张卡片，底部有一堆按钮 - 请参见下图。

我想将前两个图标保留在左侧，但将 (X) 按钮一直移到右侧。我该如何实现这个目标？

这是我现在所拥有的不起作用的：

<Card style={styles.listItem}>
   <Card.Content>
      <Paragraph>{item.description}</Paragraph>
   </Card.Content>
   <Card.Actions>
      <Button><Icon name="checkcircleo" /> </Button> 
      <Button><Icon name="clockcircleo" /> </Button>
      <Button style={{ alignItems: 'stretch' }}><Icon name="closecircle" /> </Button>
   </Card.Actions>
</Card>