标签: react-native-flexbox

我怎样才能flex-direction: row-reverse在React-Native中重现？当我在元素'风格时,我正在做:

 flexDirection: 'row-reverse'

我收到错误:

无效道具flexDirection的值row-reverse提供给 StyleSheet

更新:他们刚刚在0.29.0版本中添加了它 :)

我正在使用这里的 react-native-elements 列表：https : //react-native-training.github.io/react-native-elements/API/lists/

当我用flex: 1它来渲染它时，它很窄。当我用width: 400它渲染它时就可以了。

以下是样式：

container: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
    },
    half: {
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        borderWidth: 2,
        borderColor: '#FF0000'
    },

这是列表代码：

     <View style={styles.container}>
        { babyList.length === 0 ? null :
            <View style={styles.half}>
                <List containerStyle={{flex: 1}}>
                    <Text style={styles.welcome}>
                        Select Baby
                    </Text>
                    {babyList.map((baby, id) => {
                        return <ListItem key={"bbbtn" + id}
                                         onPress={ (event) => selectBaby(baby) } title={"Baby: " + baby.name}/>
                    })}
                </List>
            </View>
        }
      </View>

下面是上面代码的样子： …

在HTML中，我可以通过实现

<span style="background-color:red">ketan</span>

但是在本机中如何实现此功能，以便仅将颜色应用于文本。

在我的 React Native 应用程序中，我有一个父级，它包含一个包含元素的View子级。默认情况下，子视图的宽度会拉伸以填充父视图。但如果我添加，子项会移动到中心，但其宽度也会缩小到仅适合其包含的文本的宽度。ViewTextalignItems: 'center'

这是一份小吃。取消注释alignItems: 'center'以查看差异：https ://snack.expo.io/@gkeenley/alignitems-example

有谁知道为什么会发生这种情况？

我正在尝试在 React Native 中创建一个简单的内容大小的对话框。在这个层次结构中最高的，我的叠加层<View>样式如下：

 {
   position: 'absolute',
   top: 0,
   left: 0,
   width: '100%',
   height: '100%',
   zIndex: 100,
   backgroundColor: COLOR
} 

在其中，我有一个<View>具有这种风格的包装器：

{
   flex: 1,
   alignItems: 'center',
   justifyContent: 'center'
}

然后我有对话框<View>：

{
   flex: 1,
   width: '86%',
   maxWidth: 450,
   flexDirection: 'column',
   justifyContent: 'flex-start',
   alignItems: 'flex-start',
   backgroundColor: 'white',
   borderWidth: 5,
   borderColor: 'gold'
}

不过，问题似乎在于我构建对话框的方式：

<View style={{flex: 1, flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'flex-start'}}>
  <Image source={require('../../assets/icons/warning.png')} 
   style={{resizeMode: 'contain', height: 50, width: 48, marginRight: 30}} />
  <View style={[flex: 1, …

我在 react-native-android 中创建了一个 2 列的 FLatlist

1    |    2
------------
3    |    4

我要这个

2    |    1
4    |    3

我尝试这些：

<View style={{flex:1,flexDirection:'row-reverse'}}>
        <FlatList
            style={{flex:1,flexDirection:'row-reverse'}}

在渲染项目我使用flexDirection:'row-reverse'过

但没有成功！

我是新来的react native。我正在探索这里的layout属性，但我一直无法理解该属性，因为它不存在于. 但经过一些研究后，我对这个属性有了一些了解。但我想了解这里记录的步骤，但我完全不明白并且无法理解它们。谁能用简单的话解释一下每个步骤aspectRatioCSS

• 在具有设置宽度/高度纵横比的节点（这里是什么节点？）上控制未设置尺寸的大小（这里什么是未设置尺寸？）
• 在具有设置的弹性基础纵横比的节点（这里的节点是什么？）上，如果未设置，则控制横轴上节点的大小
• 在具有测量函数纵横比的节点（这里的节点是什么？）上，就像测量函数（这里的函数是什么？）测量弹性基础一样
• 在具有弹性增长/收缩纵横比的节点上（这里的节点是什么？），如果未设置，则控制横轴上节点的大小
• 纵横比考虑了最小/最大尺寸（这里考虑什么？）

我将对所有贡献者感到高兴。谢谢 ！！！

我的 React Native 应用程序中有一个内部TouchableOpacity有一个Text组件，我希望它的TouchableOpacity宽度与Text. 我尝试这样做：

<TouchableOpacity style={{flexDirection: 'row', flexBasis: 0, flexShrink: 1}}>
    <Text>text</Text>
</TouchableOpacity>

但TouchableOpacity仍然与整个屏幕一样宽。flexGrow默认情况下是 0，所以我想通过允许TouchableOpacity收缩flexShrink并使其flexBasis为零，