В настоящее время я просматриваю некоторые данные, чтобы отобразить 4 точки в строке состояния в JSX в React Native. Тем не менее, у меня есть второй массив, который я бы хотел отобразить, так что каждая дата появляется там, где у меня есть даты необходимости комментариев, чтобы идти сюда, чтобы даты были ниже каждой точки, которая отображается.
Я просматриваю их ниже этого комментария, но мне нужно, чтобы они выходили выше, как часть первой карты. Есть ли способ сделать это?
const StatusBar = ({ projectData }) => {
const statusBarPositions = [1, 2, 3];
const currentStatusBarPosition = () => {
let position;
switch (projectData.get('state')) {
case 'Project 1':
position = 1;
break;
case 'Project 2':
position = 2;
break;
case 'Project 3':
position = 3;
break;
default:
position = 0;
}
return position;
};
const projectDates = ['12/1', '3/1', '6/1', '9/1']
return (
<View>
<View style={ styles.statusBarContainer }>
<View style={ styles.progressDotFirst } />
{
statusBarPositions.map((statusBarPosition) => {
return (
<View key={ statePosition } style={ styles.statusBarLineContainer }>
<View style={ (currentStatusBarPosition() >= statusBarPosition) ? [styles.statusBarLine, styles.statusBarActive] : styles.statusBarLine } />
<View style={ (currentStatusBarPosition() >= statusBarPosition) ? [styles.statusBarDot, styles.statusBarActive] : styles.statusBarDot } />
</View>
<View>
<Text>{ ***need dates to go here*** }</Text>
</View>
);
})
}
</View>
<View>
{
projectDates.map((date) => {
return (
<Text>{ date }</Text>
)
})
}
</View>
</View>
);
};
StatusBar.propTypes = {
projectData: PropTypes.instanceOf(Object)
};
export default statusBar;
array.map
передает индекс массива в качестве второго аргумента. Если оба массива соответствуют друг другу по индексу, то вы можете использовать их для отображения дат (обратите внимание на индекс i
в statusBarPositions.map((statusBarPosition, i)
):
<View style={ styles.progressDotFirst } />
{
statusBarPositions.map((statusBarPosition, i) => {
return (
<View key={ statePosition } style={ styles.statusBarLineContainer }>
<View style={ (currentStatusBarPosition() >= statusBarPosition) ? [styles.statusBarLine, styles.statusBarActive] : styles.statusBarLine } />
<View style={ (currentStatusBarPosition() >= statusBarPosition) ? [styles.statusBarDot, styles.statusBarActive] : styles.statusBarDot } />
</View>
<View>
<Text>{ projectDates[i] }</Text>
</View>
);
})
}
</View>
projectDates[i] correspond to
дате statusBarPositions [i] `?