我正在制作一个具有自定义视图(例如网格视图)的react-native应用程序。该视图的所有单元格都具有相同的大小,只有一个除外。我想让单元格具有比其他单元格大一倍的条件。
我正在使用map函数通过数组进行查看。 Map函数不使用if语句。我应该怎么用?
// 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>
);
}
}
答案 0 :(得分:2)
这是示例代码,您如何在if和else中插入嵌套地图函数。
this.props.availableEvents.map((item, i) => {
if (i < this.state.imageIndex) {
return null
} else if (i === this.state.imageIndex) {
return (
<Animated.View
{...this.imagePanResponder.panHandlers}
key={i}
style={[this.rotateAndTranslate, styles.cardContainer]}
>
<View style={{ width: '100%', height: '100%' }}>
</View>
</Animated.View>
)
} else {
return (
<Animated.View
key={i}
style={styles.cardContainer}>
<View style={{ width: '100%', height: '100%' }}>
</View>
</Animated.View>
)
}
}).reverse();
};
答案 1 :(得分:1)
您可以呈现这样的条件视图
<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>