问题

I'm new in React Native and i don't know how do this:

How i do for create a component similar to image,
My code is this:

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
      },    
});

This is call by initial page like component,

Thanks a lot for your time.

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
},    
});

答案1

得分: 1

只需将带有 horizaontal 属性的 ScrollView 放入 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>;

<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>