如何在React Native中创建滑块？
如何在React Native中创建滑块？
提问于 2016-04-16 13:22:22
我目前正在开发React Native应用程序中的滑块控件。
下面是我的代码：
<SliderIOS style={styles.sliderConfigurationView}
onValueChange={(age) =>this.setState({value:age})}
maximumValue={100.0}
minimumValue={0.0} />
sliderConfigurationView: {
height: 20,
flex: 1,
margin: 6
},但不显示滑块控件。
这是我看到的屏幕：
如你所见，我得到了一个读取行，而不是滑块。
如果谁知道如何显示滑块控件，请让我知道。
回答 5
Stack Overflow用户
发布于 2017-06-12 20:54:59
下面是我如何让react原生滑块(示例)工作的：
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,
},
});Stack Overflow用户
发布于 2021-05-10 17:11:21
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,
},
});
Stack Overflow用户
发布于 2016-04-18 08:40:44
我想你需要做的就是设置样式的宽度。下面是一个完整的工作示例。
https://rnplay.org/apps/RSeQRA
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
SliderIOS,
} = React;
class SampleApp extends React.Component{
constructor(props){
super(props);
this.state = {
age: 0,
}
}
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>
Age: {this.state.age}
</Text>
<SliderIOS
style={styles.slider}
minimumValue={0}
maximumValue={100}
step={1}
onValueChange={(age) => this.setState({age: age})} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'green',
},
text: {
color: 'white',
fontSize: 24,
},
slider: {
width: 300,
}
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36660434
复制相关文章
相似问题
腾讯云开发者
