將相對於其他視圖在視圖陣營本地

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>); 
} 

點t是：您可以通過與html相同的方式通過react-native的職位來操縱您的'DOM'。

希望，這將有所幫助。