如何在React Native中创建滑块？

Question

我目前正在使用React Native app中的滑块控件。

这是我的代码：

 <SliderIOS style={styles.sliderConfigurationView}
                     onValueChange={(age) =>this.setState({value:age})}
                     maximumValue={100.0}
                     minimumValue={0.0} />

 sliderConfigurationView: {
    height: 20,
    flex: 1,
    margin: 6
 },

但不显示滑块控件。

这是我得到的屏幕：

正如您所看到的，我得到的是读取线而不是滑块。

如果有人知道如何显示滑块控件，请告诉我。

Answer 1

以下是我如何做出反应原生滑块（示例）工作：

Build error:
Transform DirectiveMetadataLinker on WebstormProjectsWYSIWIG_editor|lib/CKE_component.ng_summary.json threw error: Invalid argument (uri): Provided value ends with an unexpected extension. Expected extension(s): [.dart.deferredCount, .ng_meta.json, .ng_summary.json, .template.dart, .dart].: "ckeditor/ckeditor.js" 

Answer 2

import React, { Component } from 'react';
import {    
  StyleSheet,
  Text,
  View,
  Slider
} from 'react-native';

export default class Profile extends Component {
  constructor(props) {
   super(props)
   this.state = { age: 18 }
  } 
  getVal(val){
  console.warn(val);
  }     
  render() {    

    return (
      <View style={styles.container}>
        <Slider
         style={{ width: 300 }}
         step={1}
         minimumValue={18}
         maximumValue={71}
         value={this.state.age}
         onValueChange={val => this.setState({ age: val })}
         onSlidingComplete={ val => this.getVal(val)}
        />
        <Text style={styles.welcome}>
          {this.state.age}
        </Text>            
        <Text style={styles.instructions}>
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Answer 3

我认为您需要做的就是设置样式宽度。这是一个完全有效的例子......

https://rnplay.org/apps/RSeQRA

plot(g)

Answer 4

移动来自$(function() { $(".accordion").accordion({ collapsible: true, active: false }); }); 的{​​{1}}来电，而不是将其移至setState来修复它。然后将onValueChange道具设置为onSlidingComplete当然（似乎那里缺少了）。

Answer 5

您还可以在Slider Component中使用panHandlers 并提供prop => onMoveShouldSetResponder = {true}

------------------------------------
| Job | Class | Employee | OT | ST |
| 212 |   A   | John     | 20 | 10 |
| 911 |   C   | Rebekah  | 15 | 10 |
------------------------------------

它在android中为我工作