我如何在React Native中设计像图像

9wbgstp7 于 2023-03-24 发布在 React

关注(0)|答案(1)|浏览(106)

我是React Native的新手，我不知道如何做到这一点：

我是如何创建一个类似于图像的组件的，我的代码是这样的：

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

export default function SeccionA({navigation}) {
    return (
        <View style={styles.contenedor}>
            <View style={styles.listado} >
                <View style={styles.listadoItem}>
                    <Text>BVCC</Text>               
                    <Text>15.709</Text>
                    <Text>2.65</Text>
                    <Text>2%</Text>
                </View>
                <View style={styles.listadoItem}>
                    <Text>IBC</Text>
                </View>
                <View style={styles.listadoItem}>
                    <Text>Industrial</Text>
                </View>
                <View style={styles.listadoItem}>
                    <Text>Financiero</Text>
                </View>
                <View style={styles.listadoItem}>
                    <Text></Text>
                </View>
            </View>        
        </View>
    );
}
   
const styles = StyleSheet.create({
    contenedor: {
        marginHorizontal: 10
    },
    listado: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-between'
      },
      listadoItem: {
        flexBasis: '49%',
        paddingHorizontal: 30
      },    
});

这是由初始页面类组件调用，
非常感谢你的时间。

react-native

来源：https://stackoverflow.com/questions/75688078/how-i-do-design-in-react-native-like-image

1条答案

按热度按时间

2nbm6dog1#

只要把一个ScrollView与props horizontal和把文本到TouchableHighlight对象

<ScrollView
                horizontal
            >
              <TouchableHighlight 
                onPress={ () => { 
                  setWhatTab(0);
                }
              }
              >
                <Image 
                  source={require('../img/btnTransadas.png')}
                  style={{padding: 10, height: 27}}
                />
              </TouchableHighlight>                                
              <TouchableHighlight 
                style={styles.btnCotizar}
                onPress={ () => {
                    setWhatTab(1);
                  }
                }
              >
              <Image 
                  source={require('../img/btnBajando.png')}
                  style={{padding: 10, height: 27}}
                />
              </TouchableHighlight>                                
              <TouchableHighlight 
                style={styles.btnCotizar}
                  onPress={ () => {
                    setWhatTab(2);
                  }
                } 
              >
                <Image 
                  source={require('../img/btnSubiendo.png')}
                  style={{padding: 10, height: 27}}
                />
              </TouchableHighlight>                                
              <TouchableHighlight 
                style={styles.btnCotizar}
                  onPress={ () => {
                    setWhatTab(3);
                  }
                } 
              >
                <Image 
                  source={require('../img/btnCotizaciones.png')}
                  style={{padding: 10, height: 27}}
                />
              </TouchableHighlight>                                
            </ScrollView>

赞(0）回复(0）举报 2023-03-24

我来回答

我如何在React Native中设计像图像

1条答案

相关问题

热门标签

最新问答