react native类似这种效果怎么实现？
react native类似这种滚动选取效果该怎么实现？有react native0.71版本能用的组件或有现成react native参考代码吗？
你可以使用React Native的ScrollView组件来实现滚动选取效果。ScrollView是一个通用的可滚动的容器，你可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView不仅可以垂直滚动，还能水平滚动（通过horizontal属性来设置）。你可以在ScrollView中放置多个Picker组件，这样就可以实现滚动选取效果了。以下是一个简单的示例代码：
import React, { useState } from 'react';
import { ScrollView, Picker } from 'react-native';
const App = () => {
const [selectedValue, setSelectedValue] = useState('java');
return (
<ScrollView>
<Picker
selectedValue={selectedValue}
onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
>
<Picker.Item label="Java" value="java" />
<Picker.Item label="JavaScript" value="js" />
</Picker>
</ScrollView>
);
};
export default App;
ScrollView
要实现类似的滚动选取效果，可以使用 react-native-picker-select 这个第三方组件来完成。这个组件支持多项选择、单项选择和数字选择等功能，而且还能够自定义样式。
你可以通过以下命令来安装这个组件：
npm install react-native-picker-select --save
接下来，你需要在需要使用的页面中引入组件，并根据自己的需求进行配置。例如，如果你想要创建一个支持单项选择的滚动选取器，可以按照如下方式进行配置：
jsx
import React, { useState } from 'react';
import RNPickerSelect from 'react-native-picker-select';
const options = [
{ label: 'Option 1', value: 'option1' },
{ label: 'Option 2', value: 'option2' },
{ label: 'Option 3', value: 'option3' }
];
const App = () => {
const [selectedOption, setSelectedOption] = useState('');
return (
<RNPickerSelect
onValueChange={(value) => setSelectedOption(value)}
items={options}
placeholder={{ label: 'Select an option', value: '' }}
value={selectedOption}
/>
);
};
export default App;
上面的代码中，我们首先定义了一个 options 数组，用于存储可供选择的选项。然后，我们创建了一个 App 组件，在组件中初始化了一个状态 selectedOption，用于保存当前选中的选项。最后，我们把 RNPickerSelect 组件渲染到页面上，并配置了 items 属性为 options 数组，placeholder 属性为一个默认的占位符，以及 value 属性为当前选中的选项。
当用户选择一个选项时，onValueChange 回调函数会被触发，我们可以在这个回调函数中更新 selectedOption 状态，从而实现选项的变更。
React Native 滑动组件
import React from "react";
import {Button, View, Text, StyleSheet,Dimensions,
Image,TextInput,ListView,Alert,Animated,Easing,
TouchableOpacity} from 'react-native';
import PropTypes from 'prop-types';
let screenWidth = Dimensions.get('window').width;
let screenHeight = Dimensions.get('window').height;
export default class SlideButton extends React.Component{
static propTypes = {
onButtonClick: PropTypes.func,
txtArray:PropTypes.array,
};
constructor(){
super();
this.state = {
indexViewMarginLeft:new Animated.Value(0),
activityTxtColor:'#4394F1',
inactiveTxtColor:'gray',
selecIndex:1,
};
this.textList = [];
this.txtRefList = [];
};
moveLeftAnim(){
Animated.timing(this.state.indexViewMarginLeft, {
toValue: 20,
duration: 800,
easing: Easing.linear
}).start();
};
moveRightAnim(){
Animated.timing(this.state.indexViewMarginLeft, {
toValue: screenWidth / 2 + 10,
duration: 800,
easing: Easing.linear
}).start();
};
componentDidMount() {
this.state.indexViewMarginLeft.addListener(({value})=> {
// if(value === 20){
//
// this.refs.index1.setNativeProps({
// style: {
// color: this.state.activityTxtColor,
// }
// });
// this.refs.index2.setNativeProps({
// style: {
// color: this.state.inactiveTxtColor,
// }
// });
// this.props.onButtonClick && this.props.onButtonClick(1);
//
// }else if(value === (screenWidth / 2 + 10)){
// this.refs.index2.setNativeProps({
// style: {
// color: this.state.activityTxtColor,
// }
// });
// this.refs.index1.setNativeProps({
// style: {
// color: this.state.inactiveTxtColor,
// }
// });
// this.props.onButtonClick && this.props.onButtonClick(2);
// }
});
}
componentWillUnMount() {
this.state.indexViewMarginLeft.removeAllListeners();
}
render(){
let{txtArray} = this.props;
// txtArray.map(function(value,key){
// console.log('84--------:'+key+" value:"+value);
// });
// console.log('83----------:'+txtArray.length);
// let testView = this.buileTxt(txtArray);
// console.log('88----------'+testView);
return(
<View style = {{flex:1}}>
<View style = {{width:'100%',height:60,flexDirection:'row'}}>
{this.buileTxt(txtArray)}
</View>
{/*滚动视图*/}
<Animated.View pointerEvents={'none'} style = {{height:50,width:screenWidth / txtArray.length,
borderWidth:2,borderColor:'#4394F1',
borderRadius:22.5,marginTop:-55,marginLeft:this.state.indexViewMarginLeft}}>
</Animated.View>
</View>
)
}
buileTxt(array){
for(let i = 0; i < array.length; i ++){
let view = <Text style = {[styles.slideButtonStyle,{
color:i === 0? this.state.activityTxtColor:this.state.inactiveTxtColor,backgroundColor:'#1235F5',}]}
ref={ (refName) => {
this.txtRefList[i] = refName
}}
key={i+"2019"}
onPress = {() =>this.startAnim(i)}>
{array[i]}
</Text>
this.textList.push(view);
}
return this.textList;
};
startAnim(i){
for(let k = 0 ; k < this.txtRefList.length; k ++){
if(k === i){
this.txtRefList[i].setNativeProps({
style: {
color: this.state.activityTxtColor
}
});
}else{
this.txtRefList[k].setNativeProps({
style: {
color: this.state.inactiveTxtColor,
}
});
}
}
Animated.timing(this.state.indexViewMarginLeft, {
toValue: i * screenWidth / this.txtRefList.length,
duration: 500,
easing: Easing.linear
}).start();
};
}
const styles = StyleSheet.create({
container: {
flex:1,
backgroundColor:'#F5F5F5',
flexDirection:'column',
},
slideButtonStyle:{
flex:1,
height:60,
textAlignVertical:'center',
lineHeight:60,
textAlign:'center',
alignItems:'center',
},
});
- 这有个类似的问题, 你可以参考下: https://ask.csdn.net/questions/7783064
- 这篇博客也不错, 你可以看下维护积极的react native，为什么会有人造谣react native不维护了，停止维护。
- 除此之外, 这篇博客: 【React Native】基础知识及入门使用中的 运行 React Native 应用程序 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
在iOS或Android手机上安装[Expo](https://docs.expo.io/versions/v36.0.0/get-started/installation/ Expo)客户端应用程序，并连接到与计算机相同的无线网络（Wifi热点）。在Android上，使用Expo应用程序从终端扫描二维码以打开项目。在iOS上，按照屏幕上的说明（一般为使用相机扫描）获取链接。
- 您还可以看一下 李宁老师的完全征服React Native课程中的 导出枚举类型小节, 巩固相关知识点
- 以下回答来自chatgpt:
对于滚动选取的效果，React Native提供了一个组件Picker来实现。在React Native 0.71版本中，该组件已经默认提供，无需额外安装。
下面是实现Picker组件滚动效果的示例代码：
import React, { Component } from 'react'; import { Picker, StyleSheet, View } from 'react-native'; export default class MyPicker extends Component { constructor(props) { super(props); this.state = { selectedItem: '', fruits: [ { label: 'Apple', value: 'apple' }, { label: 'Banana', value: 'banana' }, { label: 'Cherry', value: 'cherry' }, { label: 'Durian', value: 'durian' }, { label: 'Elderberry', value: 'elderberry' } ] }; } onValueChange = (itemValue) => { this.setState({ selectedItem: itemValue }); } render() { return ( <View style={styles.container}> <Picker selectedValue={this.state.selectedItem} onValueChange={this.onValueChange} > {this.state.fruits.map((item, index) => { return ( <Picker.Item label={item.label} value={item.value} key={index} /> ); })} </Picker> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center' } });在这个例子中，我们定义了一组水果，通过Picker组件来选择其中一个。
首先，我们在构造函数中初始化了状态state，包括选择的水果selectedItem和水果列表fruits。
然后，我们通过onValueChange方法来更新selectedItem状态，该方法会在滚动选取到不同的选项时被调用。
最后，我们通过Picker组件来渲染水果列表，Picker.Item表示一个选项，它的label属性是选项的显示文字，value属性是选项的值。
在实际使用中，我们可以根据自己的需求来修改选项的内容和样式，从而实现更加丰富的滚动选取效果。
如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^
可以通过ScrollView组件来实现滚动选取效果，在组件中加载待选择列表