如何在react-native中的嵌套映射函数内使用else条件? [英] How to use if else condition inside nested map function in react-native?
本文介绍了如何在react-native中的嵌套映射函数内使用else条件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在制作一个具有自定义视图(例如网格视图)的react-native应用程序.该视图的所有单元格都具有相同的大小(只有一个除外).我想让单元格具有比其他单元格大一倍的条件.
我正在使用map函数通过数组进行查看. Map函数不使用if语句.我应该如何使用它?
I am making a react-native app that has a custom view like a grid view. All the cells of the view have same size except one. I want to give condition for the cell to have double the size from others.
I am making the view through an array using map function. Map function is not taking if statement. How should I use it?
// Buttons Array
buttons = [['1', '2', '3'],
['a', 'b', 'c'],
['q', 'w', 'e'],
['+', '-', '*'],
]
// '-' has double size...
import React, { Component } from 'react';
import {
View,
Text,
TouchableNativeFeedback
} from 'react-native';
//Styles
import styles from './styles';
export default class NumberButtons extends Component {
//This will call the bound function from its parent component
//to handle button press action/event
_handleOnPress = (value) => {
requestAnimationFrame(() => {
this.props.onBtnPress(value);
});
}
render() {
return (
<View style={styles.container}>
{
this.props.buttons.map((row, index) => (
<View key={index} style={styles.contRow}>
{
row.map((col,index) => (
//**** Here I want to use if else for row and column ***//
<TouchableNativeFeedback
key={index}
onPress={() => this._handleOnPress(col)}
background={TouchableNativeFeedback.SelectableBackground()}>
<View style={styles.buttonContainer}>
<Text style={styles.text}>{col}</Text>
</View>
</TouchableNativeFeedback>
))
}
</View>
))
}
</View>
);
}
}
推荐答案
您可以呈现这样的条件视图
You can render conditional views like this
<View style={styles.container}>
{this.state.buttons.map((row, index) => {
const myRow = row
console.log("myRow",myRow)
return (
<View key={index} style={styles.contRow}>
{
row.map((col,index) => {
if(col != 3 && myRow != null ){
return (
<TouchableNativeFeedback
key={index}
onPress={() => this._handleOnPress(col)}
background={TouchableNativeFeedback.SelectableBackground()}>
<View style={styles.buttonContainer}>
<Text style={styles.text}>{col}</Text>
</View>
</TouchableNativeFeedback>
)
}
else {
return (
<TouchableNativeFeedback
key={index}
onPress={() => this._handleOnPress(col)}
background={TouchableNativeFeedback.SelectableBackground()}>
<View style={styles.buttonContainer}>
<Text style={{backgroundColor:'#78909C'}}>{col}</Text>
</View>
</TouchableNativeFeedback>
)
}
})
}
</View>
)})
}
</View>
这篇关于如何在react-native中的嵌套映射函数内使用else条件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文