Question

我目前正在映射一些数据，以便在React Native的JSX中的状态栏上渲染4个点。但是，我还有第二个数组要映射，以便每个日期都显示在我有评论 需要日期到此处 的位置，以便将日期转到呈现的每个点下方。

我正在该评论下方映射它们，但我需要它们在第一张地图的上方。有办法解决吗？

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;

Answer 1

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>

在JSX中映射第二个数组

1 个答案: