[英]React Native CheckBox is not working
我是React Native的新手,試圖在視圖中添加一個復選框,但是我無法在react native的視圖中獲取復選框。
提前致謝。
import React from 'react';
import {View, CheckBox } from 'react-native';
export default class SimpleCheckBox extends React.Component{
constructor(){
super();
}
render(){
return(
<View>
<CheckBox value={true} onValueChange={() => console.log("value might change")}/>
</View>
)
}
}
CheckBox
僅在版本0.49中添加到React-Native中,並且僅適用於Android 。 這意味着,如果您正在為iOS開發或無法升級應用程序版本,則需要使用自定義復選框組件。
您可以在以下位置查看此新版本引入的所有更改: https : //github.com/facebook/react-native/releases/tag/v0.49.0
import React, { Component } from 'react'
import styled from 'styled-components'
import { TouchableOpacity, View } from 'react-native'
const CustomCheckBox = styled(View)`
height: 24px;
width: 24px;
background: ${props => (props.checkBoxActive ? '#448ccb' : 'transparent')};
border-radius: 0px;
position: relative;
justify-content: center;
margin: 0px 8px 0 0;
border: solid 1px #e1e4e5;
`
const CheckIcon = styled(View)`
border-radius: 0px;
align-self: center;
transform: rotate(-30deg);
`
/*==============================
Custom checkbox styled
===============================*/
const CheckIconWrapper = styled(View)`
position: relative;
left: 2px;
top: -2px;
`
const CheckIconVertical = styled(View)`
height: 5px;
width: 2px;
background: ${props => (props.checkBoxActive ? '#fff' : 'transparent')};
`
const CheckIconHorizontal = styled(View)`
height: 2px;
width: 16px;
background: ${props => (props.checkBoxActive ? '#fff' : 'transparent')};
`
class CheckBox extends Component {
state = {
checkBox: false
}
render() {
return (
<TouchableOpacity
onPress={() => {
this.setState({ checkBox: !this.state.checkBox })
}}>
<CustomCheckBox checkBoxActive={this.state.checkBox}>
<CheckIcon>
<CheckIconWrapper>
<CheckIconVertical checkBoxActive={this.state.checkBox} />
<CheckIconHorizontal checkBoxActive={this.state.checkBox} />
</CheckIconWrapper>
</CheckIcon>
</CustomCheckBox>
</TouchableOpacity>
)
}
}
export default CheckBox
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.