My code:
export default class ClearComponent extends Component {
color= ['red', 'blue']
font_family= ['normal', 'notoserif', 'sans-serif']
state = {
text: '',
context: [
],
color:"black",
font_family:"normal",
};
textInputOnChange = (text) => {
const {context, color, font_family} = this.state;
if (context.length > text.length) {
context.pop()
this.setState({
context
})
} else {
this.setState({
context:[...context,{
value: text[text.length - 1],
color,
font_family
}]
})
}
};
render() {
const {context} = this.state;
const { color, font_family} = this
return (
<View>
<TextInput onChangeText={this.textInputOnChange}>
{context.map((element) => {
return (
<Text
style={{fontFamily: element.font_family, color: element.color,fontSize:25}}>
{element.value}
</Text>
);
})}
</TextInput>
<Picker
selectedValue={this.state.font_family}
mode="dropdown"
onValueChange={(itemValue, itemIndex) => {
this.setState({font_family: itemValue});
}}
>
{font_family.map((element) => {
return (
<Picker.Item
key={(key) => key.id}
value={element}
label={element}
/>
);
})}
</Picker>
<View style={{flexDirection: 'row'}}>
{color.map((element) => {
return (
<TouchableOpacity onPress={()=>{
this.setState({color:element})
console.log(this)}}>
<Text
style={{
height: 25,
width: 25,
backgroundColor: element,
borderRadius: 20,
marginHorizontal: 2,
marginVertical: 2,
}}/>
</TouchableOpacity>
);
})}
</View>
<Text style={{fontFamily:"",fontSize:40}}>dsadas</Text>
</View>
);
}
}
I am working on a notebook application. I have also encountered such problem, I found a few solutions but it was not enough and it brings up a lot of problems.
I want to make a different style definition for each character, but this code works badly.
Are there special libraries for this?
I am open to your alternative solutions.
