英文:
how i do design in React Native like image
问题
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.
英文:
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.
答案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>;
英文:
Just put a ScrollView with props horizaontal and put the text into the TouchableHighlight object
<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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论