在 React Native 中放置一个相对于其他视图的视图

Question

我尝试创建这样的东西：

如您所见，文本应相对于代表当天的标记（上方居中）放置。当您在最初几天和最后几天时，它应该留在框架内，而不是在高标记上方居中。

我如何做到这一点？

这是我当前的代码：

组件

 export default class DateLine extends Component {
  render() {
    const dots = (<View style={Styles.dotsContainer} >
      {[...Array(DaysInCurrentMonth())].map((x, i) =>
        <View key={i.toString()} style={[Styles.dot, (CurrentDayInMonth() === (i + 1) ? Styles.tallDot : null), (CurrentDayInMonth() < (i + 1) ? Styles.grayDot : null)]} />
      )}
    </View>);
    return (
      <View style={Styles.container}>
        <Text style={Styles.text}>{GetDateWithMonthAsText(Date()).toUpperCase()}</Text>
        {dots}
      </View>
    );
  }
}

风格：

export default StyleSheet.create({
  container: {
    alignSelf: 'stretch',
    marginHorizontal: 15
  },

  dotsContainer: {
    height: 10,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-end'
  },

  dot: {
    backgroundColor: Colors.darkBlueGrey,
    height: 5,
    width: 5,
    borderRadius: 2.5
  },

  tallDot: {
    height: 10
  },

  grayDot: {
    backgroundColor: Colors.pinkishGreyTwo
  },

  text: {
    fontWeight: '600'
  }
});

Answer 1

不是一个完美但快速的解决方案，您可以轻松改进：

export default class DateLine extends Component {
    _renderDay (x, i) {
        let currentDay = CurrentDayInMonth();
        if(currentDay > (i + 1)) {
            return <PassedDay />;
        }

        if(currentDay === (i + 1)) {
            return <ActiveDate dateTitle={ GetDateWithMonthAsText(Date()).toUpperCase() } />;
        }

        return <InactiveDay />;
    }

    render() {
        return (
            <View style={ Styles.container }>
              <View style={ Styles.dotsContainer } >
                {[...Array(DaysInCurrentMonth())].map(this._renderDay)}
            </View>
          </View>
        );
    }
}

export function PassedDay() {
    return (<View>
        <View style={{backgroundColor: '#1f1749', width: 5, height: 5, borderRadius: 5, marginHorizontal: 2.5,}} />
    </View>);
}

export function ActiveDate(dateTitle) {
    return (<View style={{position: 'relative'}}>
        <View style={{position: 'absolute', minWidth: 70, bottom: 15, left: 0, right: 0,}}>
            <Text>
                {dateTitle}
            </Text>
        </View>
        <View style={{backgroundColor: '#1f1749', width: 5, height: 10, borderRadius: 5, marginHorizontal: 2.5,}} />
    </View>);
}

export function InactiveDay() {
    return (<View>
        <View style={{backgroundColor: 'gray', width: 5, height: 5, borderRadius: 5, marginHorizontal: 2.5,}} />
    </View>);
}

重点是：您可以通过 react-native 的位置以与 html 相同的方式操作“DOM”。

希望，它会有所帮助。