置きビュー相対は、私がこのようなものを作成しようとネイティブ

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

ポアンあなたはhtmlと同じ方法で反応ネイティブの位置を介してあなたの 'DOM'を操作することができます。

希望、それは役に立ちます。