Question

我正在尝试让时间以连续的方式从左到右然后从右到左移动。我已经找到了react-native-text-ticker库，它几乎可以实现我想要的功能，但前提是文本很长。

是否可以将此库用于较小的文本，但可以使文本在父区域之间滑动？

以下是我到目前为止的内容，但文字仍然保持不变。如果我有很多空格“ nbsp;”在任何时候，我都可以使它移动一点。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Header, ButtonGroup } from 'react-native-elements';
import TextTicker from 'react-native-text-ticker'

export default class App extends React.Component {

  render() {

    return (      
        <View style={{alignItems: 'center', justifyContent: 'center', marginTop: 100}}>
            <View style={{flexDirection: 'row', justifyContent: 'center', borderWidth: 1, borderTopWidth: 0, borderColor: '#CCC'}}>
              <View style={{flexDirection: 'row', justifyContent: 'center', flex: 0, flexWrap: 'nowrap', overflow: 'hidden'}}>
                <View style={{flex: 0, flexGrow: 1, width: '34%', flexDirection: 'column', height: 20, justifyContent: 'center', borderColor: '#000', borderWidth: 1, borderRightWidth: 0}} >
                </View>
                <View style={{flex: 0, flexGrow: 1, width: '33%', flexDirection: 'column', height: 20, justifyContent: 'center', borderColor: '#000', borderWidth: 1, borderRightWidth: 0}} >
                </View>
                <View style={{flex: 0, flexGrow: 1, width: '33%', flexDirection: 'column', height: 20, justifyContent: 'center', borderColor: '#000', borderWidth: 1}} >
                </View>
              </View>
              <View style={{position: 'absolute', width: '100%', height: 20, flex: 1, justifyContent: 'center', borderWidth: 1, borderColor: 'green'}}>
                <TextTicker
                  style={{fontSize: 14, fontWeight: 'bold', borderWidth: 1, borderColor: 'red', width: 1000}}
                  duration={3000}
                  bounce
                  loop
                  repeatSpacer={50}
                  marqueeDelay={1000}
                >
                  21 : 48 : 36
                </TextTicker>
              </View>
            </View>
          </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

谢谢

React Native Text Ticker-并排

0 个答案: