我正在使用Picker native-base到React Native。我想要像Android和iOS一样发布的图片样式选择器。但我不知道如何这样的风格。
全局声明常量
import SmoothPicker from "react-native-smooth-picker";
const Bubble = props => {
const { children, selected, horizontal } = props;
return (
<View
style={[
horizontal ? styles.itemStyleHorizontal : styles.itemStyleVertical,
selected &&
(horizontal
? styles.itemSelectedStyleHorizontal
: styles.itemSelectedStyleVertical)
]}
>
<Text
style={{
textAlign: "center",
fontSize: selected ? 20 : 17,
color: selected ? "#006E4F" : "#006E4F",
fontWeight: selected ? "bold" : "normal",
}}
>
{children}
</Text>
</View>
);
};
添加内部渲染()
<SmoothPicker
initialScrollToIndex={selected}
onScrollToIndexFailed={() => {}}
keyExtractor={(_, index) => index.toString()}
showsVerticalScrollIndicator={false}
bounces={true}
offsetSelection={40}
scrollAnimation
data={Array.from({ length: 15 }, (_, i) => 0 + i)}
onSelected={({ item, index }) => this.handleChange(index)}
renderItem={({ item, index }) => (
<Bubble selected={index === selected}>{item}</Bubble>
)}
/>
const styles = StyleSheet.create({
container: {
paddingTop: 60,
paddingBottom: 30,
flex: 1,
flexDirection: "column",
justifyContent: "space-between",
alignItems: "center",
backgroundColor: "#F5FCFF"
},
wrapperHorizontal: {
width: 300,
height: 50,
justifyContent: "center",
alignItems: "center",
margin: "auto",
color: "black",
marginBottom: 80
},
wrapperVertical: {
width: 100,
height: 300,
justifyContent: "center",
alignItems: "center",
margin: "auto",
color: "black"
},
itemStyleVertical: {
justifyContent: "center",
alignItems: "center",
width: 50,
height: 50,
paddingTop: 0,
borderWidth: 1,
borderColor: "grey",
borderRadius: 0,
backgroundColor: "#D9F5ED"
},
itemSelectedStyleVertical: {
paddingTop: 0,
borderWidth: 2,
borderColor: "#DAA520",
justifyContent: "center",
alignItems: "center",
backgroundColor: "#D9F5ED"
},
itemStyleHorizontal: {
justifyContent: "center",
alignItems: "center",
width: 50,
height: 50,
paddingTop: 0,
borderWidth: 1,
borderColor: "grey",
borderRadius: 0,
backgroundColor: "#D9F5ED"
},
itemSelectedStyleHorizontal: {
paddingTop: 0,
borderWidth: 2,
borderColor: "#DAA520",
justifyContent: "center",
alignItems: "center",
backgroundColor: "#D9F5ED"
}
});