Как добавить объект со стилями Link (React Router)?

Question

[kirillleogky]

App.js

import React from "react";
import { StyleSheet, Text, View, Platform, ScrollView, TouchableOpacity, Alert } from "react-native";
import { Router, Route, Link } from "./react-router";

const About = () => <Text>About</Text>;

const History = () => <Text>History</Text>;

const App = () => (
  <Router>
    <ScrollView contentContainerStyle={styles.container}>
      <Route exact path="/" component={About} />
      <Route path="/history" component={History} />
      <View style={styles.nav}>
        <Link to="/" style={styles.aboutBtn}>
          <TouchableOpacity
            onPress={() => Alert.alert('Button pressed')}
          >
            <Text style={styles.aboutBtnText}>About</Text>
          </TouchableOpacity>
        </Link>
        <Link to="/history" styles={styles.historyBtn}>
          <TouchableOpacity
            onPress={() => Alert.alert('Button pressed')}
          >
            <Text style={styles.aboutBtnHistory}>History</Text>
          </TouchableOpacity>
        </Link>
      </View>
    </ScrollView>
  </Router>
);

const styles = StyleSheet.create({
  container: {
    padding: 10,
    position: 'relative',
    display: 'flex',
    alignItems: 'center',
  },
  nav: {
    position: 'fixed',
    bottom: '2.4%',
    width: '91.3%',
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    backgroundColor: 'rgba(255, 255, 255, 1)',
    boxShadow: '0px 0px 2px rgba(77, 82, 85, 0.1), 0px 12px 20px rgba(77, 82, 85, 0.2), inset 0px 0px 2px rgba(240, 244, 247, 1)',
    borderRadius: 20,
    height: 64,
  },
  aboutBtn: {
    width: '50%',
    height: '100%',
  },
  historyBtn: {
    width: '50%',
    height: '100%',
  },
});

export default App;

При добавлении стилей к объекту:
<Link to="/" style={styles.aboutBtn}>
Появляется ошибка:

Error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

Такой вариант работает:

<Link to="/" style={{width: '50%, height: '100%'}}>

Answer 1

[smartbe]

Попробуйте добавить такой код

const style = styles();

и уже это применить к link

Comments

[kirillleogky]

smartbe

[kirillleogky]

smartbe
внутри компонента тоже самое

[smartbe]

kirillleogky, styles находится выше компонента?

[kirillleogky]

smartbe,

import React from "react";
import { StyleSheet, Text, View, Platform, ScrollView, TouchableOpacity, Alert } from "react-native";
import { Router, Route, NavLink } from "./react-router";

const About = () => <Text>About</Text>;

const History = () => <Text>History</Text>;

const style = styles();

const App = () => (
  <Router>
    <ScrollView contentContainerStyle={styles.container}>
      <Route exact path="/" component={About} />
      <Route path="/history" component={History} />
      <View style={styles.nav}>
        <NavLink to="/" style={{
          width: '50%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          textDecoration: 'none',
          justifyContent: 'center',
        }}>
          <TouchableOpacity
            onPress={() => Alert.alert('Button pressed')}
            style={styles.center}
          >
            <Text style={styles.btnText}>About</Text>
          </TouchableOpacity>
        </NavLink>
        <NavLink to="/history" style={{
          width: '50%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          textDecoration: 'none',
          justifyContent: 'center',
        }}>
          <TouchableOpacity
            onPress={() => Alert.alert('Button pressed')}
            style={styles.center}
          >
            <Text style={styles.btnText}>History</Text>
          </TouchableOpacity>
        </NavLink>
      </View>
    </ScrollView>
  </Router>
);

const styles = StyleSheet.create({
  container: {
    padding: 10,
    position: 'relative',
    display: 'flex',
    alignItems: 'center',
  },
  nav: {
    position: 'fixed',
    bottom: '2.4%',
    width: '91.3%',
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    backgroundColor: 'rgba(255, 255, 255, 1)',
    boxShadow: '0px 0px 2px rgba(77, 82, 85, 0.1), 0px 12px 20px rgba(77, 82, 85, 0.2), inset 0px 0px 2px rgba(240, 244, 247, 1)',
    borderRadius: 20,
    height: 64,
  },
  center: {
    width: '100%',
    height: '100%',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  btnText: {
    fontFamily: 'Raleway-Medium',
    fontSize: '16px',
  },
});

export default App;

[smartbe]

import React from "react";
import { StyleSheet, Text, View, Platform, ScrollView, TouchableOpacity, Alert } from "react-native";
import { Router, Route, NavLink } from "./react-router";

const About = () => About;

const History = () => History;

const styles = StyleSheet.create({
container: {
padding: 10,
position: 'relative',
display: 'flex',
alignItems: 'center',
},
nav: {
position: 'fixed',
bottom: '2.4%',
width: '91.3%',
flexDirection: 'row',
justifyContent: 'space-evenly',
backgroundColor: 'rgba(255, 255, 255, 1)',
boxShadow: '0px 0px 2px rgba(77, 82, 85, 0.1), 0px 12px 20px rgba(77, 82, 85, 0.2), inset 0px 0px 2px rgba(240, 244, 247, 1)',
borderRadius: 20,
height: 64,
},
center: {
width: '100%',
height: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
btnText: {
fontFamily: 'Raleway-Medium',
fontSize: '16px',
},
});

const style = styles();

const App = () => (





width: '50%',
height: '100%',
display: 'flex',
alignItems: 'center',
textDecoration: 'none',
justifyContent: 'center',
}}>
onPress={() => Alert.alert('Button pressed')}
style={styles.center}
>
About


width: '50%',
height: '100%',
display: 'flex',
alignItems: 'center',
textDecoration: 'none',
justifyContent: 'center',
}}>
onPress={() => Alert.alert('Button pressed')}
style={styles.center}
>
History





);

export default App;

[smartbe]

Сделай styles выше

[kirillleogky]

smartbe, TypeError: styles is not a function

Answer 2

[Kirill Makarov]

Кинь стили выше, либо вообще создай функцию в парке style в которой делаешь return {твои стили},
И в блоках пишешь style={названиефункции.названиеобьектасостилем}
И кстати почему react router dom, а не react navigation?

Comments

[kirillleogky]

Kirill Makarov, Create React Native App по дефолту