时间戳

首页 > 解决方案 > 将本机视图反应到下一行？

javascript - 将本机视图反应到下一行？

问题描述

我正在创建一个反应原生项目，在该项目中连续显示多个视图，并且在一定宽度之后，它需要转到下一行！但它不去，怎么做？

Actual Output:
word1  word-word2  word-word-word3  word-word-word4

Expected Outpu: 
word1  word-word2  word-word-word3
word-word-word4

这是我的代码：

<View style={{  flexDirection :'row',  marginHorizontal: 10, paddingTop: 7,
                paddingBottom: 7, width: 150 }}>
       <View style={{ paddingRight: 10 } }>
               <Text style={{  fontSize: 12 }}>word1</Text>
       </View>
                        
       <View style={{ paddingRight: 10 }}>
              <Text style={{  fontSize: 12 }}>word-word2</Text>
       </View>

        <View style={{ paddingRight: 10 } }>
                <Text style={{  fontSize: 12 }}>word-word-word3</Text>
        </View>

        <View style={{ paddingRight: 10 } }>
             <Text style={{  fontSize: 12 }}>word-word-word4</Text>
        </View>  
</View>

这是我的博览会“检查这个”

请建议！

标签： javascriptreactjsreact-native

解决方案

在此处输入图像描述

给组件样式的父View级：TextflexWrap:"wrap"

<View
            style={{
              flexDirection: 'row',
              marginHorizontal: 10,
              paddingTop: 7,
              paddingBottom: 7,
              width: Constants.width * 0.3,
              flexWrap: 'wrap' 
            }}>

完整示例：

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

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <View style={styles.container}>
        <View style={{ backgroundColor: '#eff3f8' }}>
          <View
            style={{
              flexDirection: 'row',
              marginHorizontal: 10,
              paddingTop: 7,
              paddingBottom: 7,
              width: Constants.width * 0.3,
              flexWrap: 'wrap' 
            }}>
            <View style={{ paddingRight: 10 }}>
              <Text style={{ fontSize: 12 }}>word1</Text>
            </View>

            <View style={{ paddingRight: 10 }}>
              <Text style={{ fontSize: 12 }}>word-word2</Text>
            </View>

            <View style={{ paddingRight: 10 }}>
              <Text style={{ fontSize: 12 }}>word-word-word3</Text>
            </View>

            <View style={{ paddingRight: 10 }}>
              <Text style={{ fontSize: 12 }}>word-word-word4</Text>
            </View>
          </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

工作应用程序：世博小吃

推荐阅读