React native 如何在React Native中创建滑块？

我目前正在使用React Native应用程序中的滑块控制

这是我的密码：

this.setState（{value:age}）
最大值={100.0}
最小值={0.0}/>
幻灯片配置视图：{
身高：20，
弹性：1，
保证金：6
},

但不显示滑块控制

这是我得到的屏幕：

正如你所看到的，我得到的是一条读取线，而不是滑块

---

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

我想你需要做的就是设置样式宽度。下面是一个完全有效的示例

var React=require（'React-native'）；
变量{
评估学，
样式表，
文本，
看法
SliderIOS，
}=反应；
类SampleApp扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
年龄:0,，
}
}
render（）{
返回(
年龄：{this.state.Age}
this.setState（{age:age}）}/>
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“绿色”，
},
正文：{
颜色：'白色'，
尺寸：24，
},
滑块：{
宽度：300，
}
});
AppRegistry.registerComponent（'SampleApp'，（）=>SampleApp）；

以下是我如何使react原生滑块（示例）工作的：

import React，{Component}来自'React'；
导入{
样式表，
文本，
看法
滑块
}从“反应本机”；
导出默认类配置文件扩展组件{
建造师（道具）{
超级（道具）
this.state={age:18}
} 
getVal（val）{
控制台警告（val）；
}     
render（）{
返回(
this.setState（{age:val}）}
onSlidingComplete={val=>this.getVal（val）}
/>
{this.state.age}
双击键盘上的R以重新加载，{'\n'}
摇动或按下开发菜单的菜单按钮
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
},
欢迎:{
尺寸：20，
textAlign:'中心'，
差额：10，
},
说明：{
textAlign:'中心'，
颜色：'#333333'，
marginBottom:5，
},
});

将

setState

调用从

onValueChange

移动到

onSlidingComplete

中，这样可以修复它。然后将

value

prop设置为

this.state.value

当然（这里似乎缺少了这个值）。

您也可以在滑块组件中使用窗格处理程序 并提供prop=>onMoveShouldSetResponder={true}

import React from 'react';
import { Slider as RNSlider, PanResponder } from 'react-native';
import { COLOR } from '../common/utils';

const Slider = () => {
    const [value,setValue] = useState(0)

    const _panResponder = PanResponder.create({
        onStartShouldSetPanResponder: (evt, gestureState) => true,
        onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
        onMoveShouldSetPanResponder: (evt, gestureState) => true,
        onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
        onPanResponderGrant: (evt, gestureState) => {
            console.log("onPanResponderGrant");
        },
        onPanResponderMove: (evt, gestureState) => { },
        onPanResponderTerminationRequest: (evt, gestureState) => true,
        onPanResponderRelease: (evt, gestureState) => {
            console.log("onPanResponderRelease");
        },
        onPanResponderTerminate: (evt, gestureState) => {
        },
        onShouldBlockNativeResponder: (evt, gestureState) => {
            return true;
        },
    });

    return (
        <RNSlider
            {..._panResponder.panHandlers}
            style={{ flex: 1 }}
            maximumValue={1}
            minimumValue={0}
            value={value}
            onValueChange={setValue}
            onMoveShouldSetResponder={true}
        />
    );
};

export default Slider;

从“React”导入React；
从“react native”导入{Slider as RNSlider，PanResponder}；
从“../common/utils”导入{COLOR}；
常量滑块=（）=>{
const[value，setValue]=useState（0）
const\u panResponder=panResponder.create({
onStartShouldSetPanResponder:（evt，手势状态）=>真，
onStartShouldSetPanResponderCapture:（evt，手势状态）=>真，
onMoveShouldSetPanResponder:（evt，手势状态）=>真，
onMoveShouldSetPanResponderCapture:（evt，手势状态）=>真，
onPanResponderGrant：（evt，手势状态）=>{
log（“onPanResponderGrant”）；
},
onPanResponderMove：（evt，手势状态）=>{}，
onPanResponderTerminationRequest：（evt，gestureState）=>true，
onPanResponderRelease：（evt，手势状态）=>{
log（“onPanResponderRelease”）；
},
onPanResponderTerminate:（evt，手势状态）=>{
},
onShouldBlockNativeResponder:（evt，手势状态）=>{
返回true；
},
});
返回(
);
};
导出默认滑块；

它在android中对我起作用

import React，{Component}来自'React'；
导入{
样式表，
文本，
看法
滑块
}从“反应本机”；
导出默认类配置文件扩展组件{
建造师（道具）{
超级（道具）
this.state={age:18}
} 
getVal（val）{
控制台警告（val）；
}     
render（）{
返回(
this.setState（{age:val}）}
onSlidingComplete={val=>this.getVal（val）}
/>
{this.state.age}
双击键盘上的R以重新加载，{'\n'}
摇动或按下开发菜单的菜单按钮
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
},
欢迎:{
尺寸：20，
textAlign:'中心'，
差额：10，
},
说明：{
textAlign:'中心'，
颜色：'#333333'，
marginBottom:5，
},
});

SliderIOS组件，顾名思义，是一个特定于iOS的组件。对于Android，试试——或者谷歌搜索“React Native Android Slider”时出现的其他开源组件。在react native中创建滑块非常方便。我已经在这里详细解释了它