标签: react-native-flexbox

假设这是布局:

<View style={styles.container}>
    <View style={styles.titleWrapper}>
        ...
        ...
    </View>
    <View style={styles.inputWrapper}>
        ...
        ...
    </View>

    <View style={styles.footer}>
        <TouchableOpacity>
            <View style={styles.nextBtn}>
                <Text style={styles.nextBtnText}>Next</Text>
            </View>
        </TouchableOpacity>
    </View>
</View>

我想用页脚样式制作视图,使其位于屏幕底部.我尝试将alignSelf属性赋予页脚,但不是定位在底部,而是将其定位到屏幕的右侧.如何让页脚项目坚持到底？谢谢.

我有一个查询返回的条款列表.每个都是一个单词.目前我的FlatList将每个单词呈现为同一行上的一个按钮(horizo​​ntal = {true})我希望按钮像普通文本一样包装.但我绝对不想使用列功能,因为这看起来不那么自然.这对FlatList来说可能是一个糟糕的用例吗？我还可以使用其他任何组件吗？

const styles = StyleSheet.create({
  flatlist: {
    flexWrap: 'wrap'
  },
  content: {
    alignItems: 'flex-start'
  }})

render() {

    return (
      <Content>
        <Header searchBar rounded iosStatusbar="light-content" androidStatusBarColor='#000'>
          <Item>
            <Icon name="ios-search" />
            <Input onChangeText={(text) => this.setState({searchTerm: text})} value={this.state.searchTerm} placeholder="enter word"/>
            <Icon name="ios-people" />

            <Button transparent onPress={this._executeSearch}>
            <Text>Search</Text>
          </Button>
          </Item>
        </Header>

        <FlatList style={styles.flatlist} contentContainerStyle={styles.content}
            horizontal={true} data={this.state.dataSource} renderItem={({item}) =>
                  <Button>
                    <Text>{item.key}</Text>
                  </Button>

              }>
        </FlatList>
      </Content>

    );
  }

我得到的其中一条错误信息是:

警告:flexWrap:components``不支持wrap`` ,而是VirtualizedList使用numColumnswith FlatList.

我有一个ScrollView内容不一定超过它的大小.让我们说这是一个表单,在出错时,它会扩展为添加错误消息然后超出ScrollView大小,这就是我使用该滚动的原因.

问题是我希望内容始终至少与ScrollView的大小相同.我知道该minHeight属性,但我发现使用它的唯一方法是重新渲染,我想避免.

我正在使用redux进行状态管理,这就是我所拥有的

<ScrollView
  contentContainerStyle={[ownStyles.container, {minHeight: this.props.scrollHeight}]}
  style={this.props.style}
  showsVerticalScrollIndicator={false}
  onLayout={(event) => {
    scrollHeight = event.nativeEvent.layout.height;
    this.props.setScrollContentHeight(scrollHeight);
  }}
>

其中this.props.setScrollContentHeight触发入射的状态下的高度的动作,和this.props.scrollHeight被所述高度.因此,在触发onLayout函数的第一个渲染之后,使用ScrollView更新状态height,然后我将minHeight其分配给其内容.

如果我将内容的样式设置为,flex: 1则ScrollView将不会滚动.

你能想出一种避免第二次渲染以达到性能目的的方法吗？

谢谢!

这是我的组成部分:

const styles = {
 menuContainer: {
  flex: 1,
  flexDirection: 'column'  
 },
 menuItem: {
  flex: 1,
  borderRadius: ??
 }
}
        <View style={styles.menuContainer}>
            <TouchableOpacity {styles.menuItem}/>                    
            <TouchableOpacity {styles.menuItem}/> 
        </View>

bordeRadius in react native不能像50%这样的百分比工作,而在flex框中我不知道每个flexItem的宽度.你有什么想法没有计算每个flexItem的宽度？

我正在使用React Native Web库，但是我无法在Web上全高

码：

import React from 'react';
import {StyleSheet, View, Text, TouchableOpacity} from 'react-native';

class index extends React.Component {

    render() {
        return (
            <View style={styles.container}>

                <TouchableOpacity
                    style={{
                    backgroundColor: 'blue'
                }}>
                    <Text style={{
                        color: 'green'
                    }}>Learning</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        width: '100%',
        height: '100%',
        margin: 0,
        padding: 0,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'red'
    }
})

export default index;

chrome浏览器的结果：

我正在尝试在我的React Native项目上为利润率样式属性使用百分比值，但这似乎降低了我的View组件之一的高度。如果我将百分比值替换为绝对值，就不会再有问题了，并且可以正常工作。您是否尝试在React Native中将百分比值用作边距？这是一些重现此问题的代码示例：

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.scene}>
        <View style={styles.card}>
          <View style={styles.container}>
            <Text>Hello World</Text>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    scene: {
        backgroundColor: '#F9E8D5',
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center',
        flexDirection: 'column'
    },
    card: {
        backgroundColor: '#E6D5C3',
        flex: 0.2,
        flexDirection: 'column',
        marginTop: '20%' // Replace by 20
    },
    container: {
        backgroundColor: '#FFFFFF',
        flex: …

所以对于上面的图像，我试图让“绿色”框环绕动态文本。注意蓝色和黄色文本框是如何flex: 'row'配置的，蓝色文本框在 a 处，黄色文本框flex: 2是flex: 1。

一切正常，直到文本对于父容器来说太大。

我希望绿色容器根据需要生长以适应弯曲的内在孩子。这可能与本机反应吗？

这是它在网络意义上的样子的图像：

我试过将绿色框设置为有一个，flex: 1但它太大了，因为它填满了整个屏幕。设置height是可能的，但我不知道最大内部组件的大小（至少没有一些hacky）。我什至试过minHeight。

有没有人尝试过这样的事情？我是否需要自己动态获取内部元素的高度？

更新 - 这是一些代码：

  <View style={{ flex: 1, flexDirection: 'column', marginTop: 70, backgroundColor: '#f9e2ff' }}>
    <View
      style={{
        minHeight: 40,
        borderWidth: 1,
        borderStyle: 'solid',
        padding: 5,
        margin: 5,
        backgroundColor: '#58c09e'
      }}
    >
      <View style={{ flex: 1, flexDirection: 'row' }}>
        <View style={{ flex: 2, backgroundColor: '#eeff96' }}>
          <Text>
            Hello this is a long bit of text that will fill …

我想在一行中渲染 7 个宽度相等的按钮，以水平填充所有可用空间。

render() {
    return (
        <FlatList
            data={this.state.days}
            renderItem={({ item }) => <View style={styles.button}><Button title={item.getDate().toString()} /></View>}
            keyExtractor={item => item.getDate().toString()}
            horizontal={true}
            style={styles.list}
        />
    );
}

const styles = StyleSheet.create({
    list: {
        display: 'flex'
    },
    button: {
        flex: 1
    }
});

它们位于平面列表内，包装在视图中，因为我无法直接设置按钮的样式。在 HTML 页面中的常规 Flexbox 中，此方法有效。

这是我在 React Native 中得到的：

也许有一些我不熟悉的扁平列表行为？

我正在尝试呈现此图像中的项目列表。

每行中的项目将根据其文本大小而有所不同。Flatlist用于渲染项目。

标签视图.js

<View style={styles.tagView}>
    <FlatList 
        scrollEventThrottle={1900} 
        data={this.state.interests} 
        numColumns={5}
        renderItem={({ item }) => (
           <View style={styles.tag}>
               <Text>{item.tagName}</Text>
           </View>
        )}
        keyExtractor={(item, index) => index}
        contentContainerStyle={{ paddingBottom: 100 }}
    />
</View>

风格

tagView: {
    flex: 1,
    flexDirection: "row",
    flexWrap: "wrap"
},
tag: {
    borderWidth: 1,
    borderRadius: 10,
    borderColor: "black",
    backgroundColor: "white",
    padding: 3,
    marginTop: 5
}

结果

但是这里的项目没有用设备宽度包装。有没有包装内容？

我正在尝试在 Android 上实现类似于谷歌地图“探索”的 UI 布局，（参见gif）在 React Native 中。

在我的 UI 设计中，我在屏幕底部有应用程序导航选项卡，具有完整的页面地图背景，覆盖有来自选项卡上方的“底部工作表”，以及顶部的搜索框组件。请参阅下面的 UI 草图。

我发现了各种看起来很有用的 react-native ui 组件，但我无法弄清楚将它们排列在我想要的布局中的样式。

我正在查看的几个底部组件，例如 rn-bottom-drawer 显示的 gifs 类似于我尝试创建的内容，例如这个动画，但我找不到该 UI 的实际代码示例创建。例如，同一个库示例仅在空屏幕上显示底部抽屉。

什么样的包装元素和样式组合可以让我创建所描述的布局？我来自 XAML 背景，这种布局很容易创建，但我无法理解如何在 React Native 中做到这一点。