экспортировать значение переключателя класса в реагировать родной - PullRequest
Новая
       38

экспортировать значение переключателя класса в реагировать родной

0 голосов
/ 26 апреля 2020

Я новичок в React Native и прошу прощения за мой английский sh, если я ошибаюсь!

Я пытаюсь создать приложение для смартфона с реактивной и нативной базой.

У меня есть одна страница для настроек с переключателем, и у меня есть функция Base в одном другом файле js, с макетом для нескольких рецептов приготовления, но моя проблема:

Я хотел бы, чтобы активируя переключатель, мои измерения в мл становятся в унциях, но я даже не могу импортировать состояние переключателя ...

как я могу импортировать состояние переключателя?

Спасибо !

Настройки. js

class Settings extends Component {
constructor(props) {
    super(props);

state = { 
    switchValue: false
}
toggleSwitch = (value) => {
    this.setState({ switchValue: value })
}

render() {

    return (
        <Container style={styles.container}>
            <Header>
                <Left>
                    <Button
                        transparent
                        onPress={() => this.props.navigation.openDrawer()}
                    >
                        <Icon name="menu" />
                    </Button>
                </Left>
                <Body>
                    <Title>Settings</Title>
                </Body>
                <Right />
            </Header>
            <Content>

                <List>

                    <ListItem>
                        <Left>
                            <Text>Impostare le misurazioni come ml</Text>
                        </Left>
                        <Right>
                    <Switch
                        style={{ marginTop: 30 }}
                        onValueChange={this.toggleSwitch}
                        value={this.state.switchValue}/>
                            </Right>
                    </ListItem>
                </List>

            </Content>
        </Container>

    );
}
}

export default Settings;

База. js

 export function Base(props) {

  return (

<Container style={styles.container}>
  <Header style={{backgroundColor:props.headercolor}}>
    <Left>
      <Button transparent>
        <Icon name="arrow-back" />
      </Button>
    </Left>


    <Body style={{ flex: 1.2 }}>
      <Title>{props.title}</Title>
    </Body>

    <Right>
    <Text>e</Text>
    </Right>

  </Header>


  <Grid>

    <Row size={25}>
      <Image
        style={{ flex: 1, height: null, resizeMode: 'contain', width: null}}
        source={path_pageimage[props.title]}
      />
    </Row>

    <Row size={75}>
      <Col size={35}>
        <Row size={5}>
          <Body>
            <Title style={styles.title}>Preparations</Title>
          </Body>
        </Row>
        <Row size={15} style={{ borderBottomColor: "gainsboro", borderBottomWidth: 1 }}>

          <Col size={35}>
            <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
              <Text>Glass:</Text>
            </View>
          </Col>
          <Col size={65}>
            <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
              <View style={{ height: "80%" }}>
                <Image
                  style={{ flex: 1, height: null, resizeMode: 'contain', width: null }}
                  source={path_glass[props.glass]}
                />
              </View>
              <View style={{ alignItems: "center" }}>
                <Text style={{ fontSize: 12 }}>{props.glass}</Text>
              </View>
            </View>
          </Col>
        </Row>
        <Row size={7}>
          <Body>
            <Text style={{ fontWeight: "bold" }}>{props.preparation}</Text>
          </Body>
        </Row>
        <Row size={73}>


          <Image
            style={{ marginTop: 0, flex: 1, height: null, resizeMode: 'contain', width: null }}
            source={path_preparation[props.preparation]}
          />

        </Row>
      </Col>

      <Col size={65} style={{ borderLeftColor: "gainsboro", borderLeftWidth: 1 }}>
        <Row size={5}>
          <Body>
            <Title style={styles.title}>Ingredients</Title>


          </Body>
        </Row>

        <Row size={55} style={{ marginBottom: 5, borderBottomColor: "gainsboro", borderBottomWidth: 1 }}>
          <FlatList
            style={{ marginLeft: 10 }}
            horizontal={false}
            numColumns={2}
            data={props.utlizatedingr}
            keyExtractor={(item, index) => index.toString()}
            renderItem={({ item }) => (
              <TouchableOpacity
                onPress={() => this.props.navigation.navigate(item.l)}
              >
                <View>
                  <Liquor l={item.l} q={item.q}/>
                </View>
              </TouchableOpacity>
            )}

          />


        </Row>

        <Row size={5}>
          <Body>
            <Title style={styles.title}>Curiosity</Title>
          </Body>
        </Row>
        <Row size={35} style={{ marginLeft: 20 }}>
          <ScrollView> 
            <Text>{props.curiosity}</Text>
          </ScrollView>
        </Row>

      </Col>

    </Row>

  </Grid>

</Container>

  );
}



function Liquor(props) { //.l = liquor, .q = quantity 

  return (
  <View style={{ flex: 1, flexDirection: 'row' }}>
    <View style={{ width: "25%", margin: 5 }}>
      <Image source={path_ingredients[props.l]} style={{ height: 80, width: 40 }} />
    </View>
   <View style={{ marginLeft: 10, marginTop: 5, justifyContent: "space-evenly" }}>
    <Text style={{ fontWeight: "bold" }}>{props.l}</Text>
    <Text>{props.q} oz</Text>
  </View>
</View>
  );
    }

Пример рецептов: Мохито. js

import { Base } from "../constructor_recipes/base"

const title = "Mojito"

const headercolor = "green"

const buttoncolor = "blue"

const utlizatedingr = [
{
  l: "Rum",
  q: "4"
},
{
  l: "Vodka",
  q: "2"
 },
 {
  l: "Vodka",
  q: "5"
}
]

 const glass = "Double Rock"

 const preparation = "Shake & Pour"

 const curiosity = "Lorem ipsum dolor sit"

 class Mojito extends Component {
   render() {

return (


  <Base
    title={title}
    headercolor = {headercolor}
    buttoncolor = {buttoncolor}
    utlizatedingr={utlizatedingr}
    glass={glass}
    preparation={preparation}
    curiosity={curiosity}
  >
</Base>

   );
  }
 }

  export default Mojito;
...