我正在将项目升级到AndroidX。在我的自定义视图中
import * as React from 'react';
import {
Text,
View,
ImageBackground,
Image,
TextInput,
Dimensions,
TouchableOpacity,
Alert,
Button,
Picker,
Animated,
Platform,
TouchableWithoutFeedback,
StyleSheet
} from 'react-native';
import axios from 'axios';
const { width: WIDTH } = Dimensions.get('window')
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
descViatura: '',
descViaturaIOS: 'Select the car',
modalIsVisible: false,
modalAnimatedValue: new Animated.Value(0),
};
}
componentDidMount() {
axios
.get(
`${'http://www.mocky.io/v2/5d304a3c3200005600204352'}`,
{
headers: {
'Content-Type': 'application/json',
},
}
)
.then(jsonResponse => {
this.setState({
viaturas: true,
dataSource: jsonResponse.data['data'],
});
})
.catch(error => console.log(error));
}
onValueChange(value: string, index: string) {
let kms = this.state.dataSource[index].km_actuais
let marcaSelecionada = this.state.dataSource[index].marca
let modeloSelecionado = this.state.dataSource[index].modelo
let matriculaSelecionada = this.state.dataSource[index].matricula
let viaturaSelecionada = marcaSelecionada + ' ' + modeloSelecionado + ' ' + matriculaSelecionada
this.setState({
descViatura: value,
km_actuais: kms,
descViaturaIOS: viaturaSelecionada
});
}
_handlePressOpen = () => {
if (this.state.modalIsVisible) {
return;
}
this.setState({ modalIsVisible: true }, () => {
Animated.timing(this.state.modalAnimatedValue, {
toValue: 1,
duration: 200,
useNativeDriver: true,
}).start();
});
};
_handlePressDone = () => {
Animated.timing(this.state.modalAnimatedValue, {
toValue: 0,
duration: 150,
useNativeDriver: true,
}).start(() => {
this.setState({ modalIsVisible: false });
});
};
render() {
let list_viaturas = this.state.dataSource;
if (typeof (list_viaturas) !== undefined) {
list_viaturas = [list_viaturas][0];
}
let km_selected = typeof (this.state.km_actuais) !== 'undefined' ? this.state.km_actuais : 0
let modalPicker = null
if (Platform.OS === 'ios') {
modalPicker = (
<View style={{
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
height: 45,
marginTop: 30,
width: '90%',
backgroundColor: '#ecf0f1',
borderWidth: 1,
}}>
<TouchableWithoutFeedback onPress={this._handlePressOpen}>
<View
style={{
alignItems: 'center',
width: '100%',
}}>
<Text style={{ paddingLeft: 15, fontSize: 14 }}>{this.state.descViaturaIOS}</Text>
</View>
</TouchableWithoutFeedback>
</View>
)
} else {
modalPicker = (
null
)
}
_maybeRenderModal = () => {
if (!this.state.modalIsVisible) {
return null;
}
const { modalAnimatedValue } = this.state;
const opacity = modalAnimatedValue;
const translateY = modalAnimatedValue.interpolate({
inputRange: [0, 1],
outputRange: [300, 0],
});
return (
<View
style={StyleSheet.absoluteFill}
pointerEvents={this.state.modalIsVisible ? 'auto' : 'none'}>
<TouchableWithoutFeedback onPress={this.props.onCancel}>
<Animated.View style={[styles.overlay, { opacity }]} />
</TouchableWithoutFeedback>
<Animated.View
style={{
width: '100%',
position: 'absolute',
bottom: 0,
left: 0,
transform: [{ translateY }],
}}>
<View style={styles.toolbar}>
<View style={styles.toolbarRight}>
<Button title="OK" onPress={this._handlePressDone} />
</View>
</View>
<Picker
style={{ width: WIDTH, backgroundColor: '#e1e1e1', top: 0 }}
selectedValue={this.state.descViatura}
itemStyle={{
fontSize: 18,
color: '#000',
}}
onValueChange={this.onValueChange.bind(this)}>
{list_viaturas.map((item, key) => {
return (
<Picker.Item
label={item.marca + ' ' + ' ' + item.modelo + ' ' + item.matricula}
value={item.id}
key={key}
/>
);
})}
</Picker>
</Animated.View>
</View>
)
}
return (
<View style={styles.container}>
{modalPicker}
<View style={styles.inputText2}>
<TextInput
style={styles.input}
value={km_selected}
keyboardType={'numeric'}
placeholder={"0"}
placeholderTextColor={'#000'}
underlineColorAndroid='transparent'
/>
</View>
{_maybeRenderModal()}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
padding: 8,
},
overlay: {
...StyleSheet.absoluteFillObject,
backgroundColor: 'rgba(0,0,0,0.65)',
},
toolbar: {
width: '100%',
backgroundColor: '#f1f1f1',
paddingVertical: 5,
paddingHorizontal: 15,
},
toolbarRight: {
alignSelf: 'flex-end',
},
inputText2: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
height: 45,
marginTop: 30,
width: '90%',
backgroundColor: '#ecf0f1',
borderWidth: 1,
},
});被转换为
android.support.constraint.R.styleable.ImageFilterView
并给出错误信息包androidx.constraintlayout.R.styleable.ImageFilterView不存在
我尝试在Androidx中寻找androidc.constraintlayout.R的相应软件包，但没有任何效果。
有什么想法吗？
答案 0 :(得分：1)
<GenerateDocumentationFile>true</GenerateDocumentationFile>
本身位于ConstraintLayout中。
样式位于androidx.constraintlayout.widget.ConstraintLayout，但是需要使用ConstraintLayout 2：
androidx.constraintlayout.widget.R.styleable.ImageFilterView