标签: react-native-flexbox

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

每行中的项目将根据其文本大小而有所不同。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 中这很容易。

这是示例代码

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="match_parent >

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="15dp"
        android:src="@drawable/button_help" />
</RelativeLayout>

但在 rn 中，flexbox 的作用似乎类似于 Android 中的 Linearlayout，父级的兄弟姐妹不能相互重叠。我认为这在移动开发中没有意义，因为多层在移动开发中很常见。我有一个技巧通过使用position:absolute来解决这个问题。该解决方案的缺点是，如果使用绝对位置，则alignItems不起作用，因此您需要使用另一个技巧来使按钮在水平线中居中。还有更好的办法吗？RN 会支持像RelativeLayout 这样的东西吗？我认为Relativelayout是进行应用程序开发布局的非常有效的方法。

这是我的 RN 代码

render() {
        var {height, width} = Dimensions.get('window');
        console.log("rntest width " + width);
        var mywidth = width;
        return(
        <View
          style={styles.viewPager}>
            <IndicatorViewPager
            style={styles.viewPager}
            initialPage={0}
            onPageScroll={onPageScroll}
            onPageSelected={onPageSelected}>
              <View
                style={styles.viewPager}>
                <Image
                  style={styles.viewPager}
                  source={require('./img/1.jpg')}
                  resizeMode='cover'/>
              </View>
              <View
                style={styles.viewPager}>
                <Image
                  style={styles.viewPager}
                  source={require('./img/2.jpg')}
                  resizeMode='cover'/>
              </View>
              <View
                style={styles.viewPager}>
                <Image …

我正在尝试设计这个设计react-native.这就是我为此编写的内容,但这不是我想要的.这仅适用于一个屏幕,如果我更改屏幕大小,则事情不起作用.

这看起来像绝对布局.我应该做些什么改变才能使它适用于所有屏幕尺寸.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from "react";
import {
  AppRegistry,
  Image,
  View,
  Text,
  Button,
  StyleSheet
} from "react-native";

class SplashScreen extends Component {
  render() {
    console.disableYellowBox = true;
    return (
      <View style={styles.container}>
        <Image
          source={require("./img/talk_people.png")}
          style={{ width: 300, height: 300 }}
        />
        <Text style={{ fontSize: 22, textAlign: "center", marginTop: 30 }}>
          Never forget to stay in touch with the people that matter to you.
        </Text>
        <View …

这是一个要实现的示例，下面是组件结构的细分

这是当前代码的方式：

             <View style={styles.buttonHolder}>
                <Text style={styles.greenButtonIcon}>
                    FB
                </Text>
                <Text style={styles.greenButtonText}>
                    {this.props.buttonName}
                </Text>
            </View>

我的问题在这里，因为文本与整个框居中对齐，所以我无法为文本和图标提供弹性值，因为那样会使它们具有自己的空间并且不会浮动。

你能帮忙吗？如果需要更多信息，请告诉我。

我有以下代码:

renderActionButtons(actionButtons){

   let actionButtonsContent = actionButtons.map((button, i) => {
      return <TouchableHighlight key={i} onPress={() => {this.updateConversation(button);}} style={globalStyle.actionButton} underlayColor='#f1f1f1'>
      <View key={i}>
        <Text style= {globalStyle.actionButtonText}>{ button }</Text>
      </View> 
      </TouchableHighlight>                           
    })
    return actionButtonsContent
  }

  renderConversations(){
    let conversationContent = this.state.conversationArray.map((convObj, i) => {
      return <View key={i} style={[globalStyle.conversationContainer,globalStyle.shadow,convObj.directionClass]}>
        <Text style= {[globalStyle.conversationText,convObj.directionTextClass]}>{ convObj.text }</Text>
        <View style= {globalStyle.actionButtonsContainer}>
          { this.renderActionButtons(convObj.actionButtons) }
        </View>
      </View>                            
    })
    return conversationContent
  }

这是为了呈现以下视图:

我正试图将这些药片包裹在白色容器内.以下是我使用的样式:

 conversationContainer:{
    maxWidth:310,
    backgroundColor: 'white',
    borderBottomRightRadius: 10,
    borderTopRightRadius: 10,
    borderBottomLeftRadius: 0,
    borderTopLeftRadius: 10,
    padding: 10,
    marginTop: 10
  },
actionButtonsContainer:{
    flex:1, …

我可以使用justifyContent: 'space-evenly'React Native中的任何元素吗？哪个？语法应该是什么样的？

谢谢!

我有一个简单的 View，它有两个孩子，另一个 View 和一个 ScrollView。ScrollView 应该比同级别的 View 高 5 倍，使用 flexbox。

<View style={{ flex: 1}}>
    <View style={{flex: 1, backgroundColor: 'powderblue'}}>
      <Text>Add new stuff</Text>
      <Button title="Browse Gallery" onPress={ openGallery } />
    </View>
    <ScrollView style={{flex: 5, backgroundColor: 'skyblue'}}>
          <Text style={{ fontSize: 100}}>Scroll me plz</Text>
          <Text style={{ fontSize: 100}}>Scroll me plz</Text>
    </ScrollView>
  </View>

顺便说一句，使用第二个 View 而不是 ScrollView 效果很好！

任何想法如何使用 ScrollView 实现 1:5 的比例？

我正在尝试在Flexbox(和React Native)中创建此布局,但我无法让它工作.具体来说,无论我做什么,左右按钮都拒绝扩展到容器宽度的50%.它们总是与其内容大小相同.

我正在使用嵌套容器.这些按钮位于柱形Flex容器中,该容器嵌套在一行Flex容器中,该容器也包含图像.

这是我的JSX:

  <View style={{
    display: 'flex',
    flex: 1,
    flexDirection: 'column'}}>
      <Image
        style={{flex: 1, zIndex: 1, width: '100%', height: '100%'}}
        resizeMode='cover'
        resizeMethod='resize'
        source={require('./thumbs/barry.jpg')}
      />
      <View style={{
        display: 'flex',
        flexDirection: 'row',
        flex: 0,
        width: '100%',
        height: 100}} >
          <Button style='flex: 1' title="LEFT"  onPress={() => {}} />
          <Button style='flex: 1' title="RIGHT" onPress={() => {}} />
      </View>
  </View>

所有回复都非常感谢...

我正在 formik 上制作一个表单，并希望它采用全屏宽度。我尝试过 flex: 1，改变弯曲方向，并改变填充。当文本比输入字段宽时，它会扩展以适应输入字段。我不想设置宽度，因为我希望它随着手机屏幕的宽度而变化。这是现在的样子的图片https://i.stack.imgur.com/wuwC9.png

这是我的样式代码：

const styles = StyleSheet.create({
  input: {
    padding: 10,
    fontSize: 18,
    borderRadius: 6,
    flex: 1,
    borderBottomColor: '#000',
    borderBottomWidth: 2,
    alignSelf: 'stretch',
    flexDirection: 'row',
  },
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  inner: {
    //padding: 20,
    flex: 1,
    // justifyContent: 'flex-end',
  },
});

输入字段如下所示：

 <View style={styles.container}>
      <Formik
        initialValues={{
          first_name: '',
          last_name: '',
          address_1: '',
          address_2: '',
          city: '',
          state: '',
          postcode: '',
          country: 'CA',
          email: 'john.doe@example.com',
          phone: '647-274-8068',
        }}
        // Form …

我正在尝试创建一个FlatList周围有一定间距的水平线。我能够paddingLeft在列表上用正确的开头间距，但是paddingRight在列表上似乎没有任何空格（如果我一直滚动到末尾，则最后一项紧靠边框按下）。

这是一个小吃，您可以运行并现场尝试：https : //snack.expo.io/@saadq/aW50cm

这是我的代码：

import * as React from 'react';
import { Text, View, FlatList, StyleSheet } from 'react-native';

const data = [{ key: 1 }, { key: 2 }, { key: 3 }, { key: 4 }];

class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          style={styles.flatList}
          horizontal
          data={data}
          renderItem={() => (
            <View style={styles.box}>
              <Text>Box</Text>
            </View>
          )}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: { …