小编kir*_*imi的帖子

我正在使用react-navigation Tab Navigation.我的标签导航上方有一个标题,它可以折叠和展开对应的scrollView.

这是我的问题:当我一直向上滚动时,标题会崩溃,这就是我想要的,但tabBar将保持静态(请参阅照片).有没有办法我可以设置tabBar margin相应的滚动视图？这样marginTop当标题折叠时就没有了.

const Header_Maximum_Height = 40;
const Header_Minimum_Height = 0;

export default class App extends Component {

  render(){
    return (
      <View style={{flex:1, marginTop:30}}>
        <AppContainer/>
      </View>
    )
  }
}

class HomeScreen extends Component{
      constructor()
    {
         super();
         this.AnimatedHeaderValue = new Animated.Value(0);
     }
render() {

const AnimateHeaderBackgroundColor = this.AnimatedHeaderValue.interpolate(
   {
    inputRange: [ 0, ( Header_Maximum_Height - Header_Minimum_Height )  ],
    outputRange: [ '#009688', '#00BCD4' ],
    extrapolate: 'clamp'
   });

const AnimateHeaderHeight = this.AnimatedHeaderValue.interpolate(
      {
       inputRange: …

我使用的Animation.view改变height和background的header。

我设置我的height和这样的background设置：

const HeaderHeight = this.state.scrollY.interpolate({
      inputRange:[0, Header_Max_Height - Header_Min_Height],
      outputRange:[Header_Max_Height, Header_Min_Height],
      extrapolate:'clamp'
    })

const AnimateHeaderBackgroundColor = this.state.scrollY.interpolate({
        inputRange: [ 0, ( Header_Max_Height - Header_Min_Height )  ],
        outputRange: [ '#009688', '#00BCD4' ],
        extrapolate: 'clamp'
    })

这是我的动画视图。

<Animated.View style={{width:'100%', height: HeaderHeight, backgroundColor:AnimateHeaderBackgroundColor}}></Animated.View>

一切正常。

我的问题是有没有一种方法可以像height和一样改变视图backgroundcolor？

例如，假设我有两种观点：

//view1
<View style={{width:'100%',height:100, backgroundColor:'red'}}>
 <Text>View1</Text>
</View>

//view2
<View style={{width:'100%',height:100, backgroundColor:'blue'}}>
  <Text>View2</Text>
</View>

我希望在view1默认情况下显示并view2在滚动到屏幕顶部时显示。将 放在View …

我有一个数组列表，当我开始在input数组列表中输入时，将过滤对应于value. 它有效，但我input在输入字符后失去了注意力。

我的代码：

const MyPage = (props) => {

  const [searchTerm, setSearchTerm] = useState("");

  const results = !searchTerm
      ? people
      : people.filter(person =>
          person.toLowerCase().includes(searchTerm.toLocaleLowerCase())
        );

  const handleChange = event => {
      setSearchTerm(event.target.value);
    };

  const Desktop = ({ children }) => {
    const isDesktop = useMediaQuery({ minWidth: 992 })

    return (
      isDesktop?
      <View>
          <input
          type="text"
          placeholder="Search"
          value={searchTerm}
          onChange={handleChange}
          />
          <View style={{width:100, height:100, backgroundColor:'red'}}>
            {results.map(item => (
              <Text>{item}</Text>
            ))}
          </View>
      </View>
      :null
    )
  }

  return(
    <View …

当我单击onPress使用时，我试图调用多个功能TouchableOpacity

例如：

functionOne(){
// do something
}

functionTwo(){
// do someting
}

<TouchableHighlight onPress{() => this.functionOne()}/>

如果onPress单击时要调用两个函数怎么办？有没有办法我可以调用多个函数？

在我的应用程序中,LoginScreen(fristScreen)可以使用facebook登录,当用户成功登录时,应用程序会收到一个Facebook access token并导航到下一个屏幕(VerifyScreen).在VerifyScreen(secondScreen)中,当我单击一个按钮时,我想facebookToken在屏幕上显示全局状态并显示.以下是我的代码:

App.js

import { createStore } from 'redux'
import { Provider } from 'react-redux'
import { createDrawerNavigator, createStackNavigator, } from 'react-navigation'

const reducer = (state = '', action) => {
  switch (action.type) {
    case 'UPDATE':
            return { facebookToken: action.payload}
  }
    return state
}

const store = createStore(reducer)

class App extends Component {
  render(){
    return(

      <Provider store={store}>
        <View style={{flex:1,backgroundColor:'transparent'}}>
          <AppDrawerNavigator/>
        </View>
      </Provider> 
    )
  }
}

LoginScreen.js

import { LoginButton, AccessToken } from 'react-native-fbsdk';
import {connect} from …

我正在使用react-native-sectioned-multi-select库。单击确认按钮后，我想打开另一个模式视图。

我觉得我正确地执行了代码，但这不起作用。是否可以在该库中打开新的模态？

const items = [
  {
    name: "Fruits",
    id: 0,
    children: [{
        name: "Apple",
        id: 10,
      },{
        name: "Strawberry",
        id: 17,
      },{
        name: "Pineapple",
        id: 13,
      },{
        name: "Banana",
        id: 14,
      },{
        name: "Watermelon",
        id: 15,
      },{
        name: "Kiwi fruit",
        id: 16,
      }]
  }]

export default class TestScreen extends Component {
  constructor(){
    super()
    this.state = {
      selectedItems: [],
      modalVisible: false,
    }
  }

  setModalVisible(visible) {
    this.setState({modalVisible: visible});
  }

  onSelectedItemsChange = (selectedItems) => {
    this.setState({ selectedItems });
    console.log(selectedItems)
  } …

我正在使用react-native-maps并且效果很好。但我有两个问题。

1. 我可以使用 自动跟踪用户位置，followsUserLocation但是当我移动地图时，它不断将我拖回用户位置。我怎么能解决这个问题？

2. 我想要刷新按钮，当用户按下按钮时，我希望我的地图视图跟随用户位置。

   constructor() {
       super();
       this.state = {
           followsUserLocation: true,
       };
   }
   
   
   mapView() {
       return(
           <MapView style={styles.map}
           showsUserLocation
           followsUserLocation={this.state.followsUserLocation}
           initialRegion={{
           latitude: 37.523814,
           longitude:  126.927494,
           latitudeDelta: 0.0922,
           longitudeDelta: 0.0421}}/>
      )
   }
   

   Run Code Online (Sandbox Code Playgroud)

任何意见或建议将不胜感激！提前致谢！

我正在使用反应导航从一个屏幕导航到另一个屏幕。顺便说一下，我正在使用createStackNavigator。

我正在使用下面的代码在屏幕之间导航。

<Button onPress={()=>this.props.navigation.navigate('ScreenTwo')}>button-></Button>

它工作正常，但我想更改动画方向。目前，当我按下按钮时，会ScreenTwo弹出，而我希望屏幕从右向左滑动。

我可以在导航时更改动画方向吗？

我有两个函数，当我按下每个函数时，我创建了一个数组。

    this.state = {
            food:[],
            sports:[],
            interest:[],   
        } 

         _favoriteFood(foodState){
            const food = foodState
            this.setState({food:food})
            console.log(food)
            console.log(this.state.food)
          }

         _favoriteSports(SportsState){
            const sports = SportsState
            this.setState({sports:sports})
            console.log(sports)
            console.log(this.state.sports)
          }
render(){


return (
<View>
      <FavoriteFood favoriteFood={this._favoriteFood}/>
</View>
       <View>
             <FavoriteSports favoriteSports={this._favoriteSports}/>
       </View>
)}

因此，例如，我越来越像数组food:[pizza, hodog]和sports:[basketball, surfing]当我打电话按一个按钮的方法。

我的问题是当我尝试合并两个数组时：

const interest = [...this.state.food, ...this.state.sports]

它显示undefined是因为我认为我在渲染发生之前调用它。

我应该使用另一种方法来合并数组吗？任何建议或意见都会非常有帮助。提前致谢 ：）

我checkbox在平面列表中创建了一个，但是当我单击复选框时，所有复选框都会呈现。我想渲染我按下的复选框而不是整个复选框。

这是我的代码：

const list = [
  {
    name: 'Kevin',
    id:0
  },
  {
    name: 'John',
    id:1
  },
]
export default class TestingScreen extends Component {
  constructor(props) {
    super(props)
    this.state = {
      checked: false
    }
  }

  handleCheckBox = () => this.setState({ checked: !this.state.checked })

  renderItem = ({ item }) => (
    <ListItem
      title={<View><Text>{item.name}</Text></View>}r
      leftAvatar={
        <View>
        <Image
                  style={{width:50, height:50,borderRadius:25 }}
                  source={require('../Components/Assets/oval.png')} />
        </View>
      }
      rightAvatar={
        <CheckBox
          checked={this.state.checked}
          onPress={() => this.setState({checked: !this.state.checked})}
        />
      }
    >
    </ListItem>

  )

  render() {
  return(
    <View style={styles.container}> …

是否可以functions(not arrow function)使用 button调用多个onPress？

我知道我可以像这样调用多个箭头函数：

onPress={() => { this.functionOne(); this.functionTwo();}}

但是如果我想在没有 的情况下调用多个函数arrow function怎么办？我试过了，但这行不通。

onPress={this.functionOne, this.functionTwo}

我正在使用Animated.View更改标题高度。

它在 ios 中运行良好，但在 android 中，当我缓慢滚动时，整个视图都在晃动。

1）首先我设置状态

 this.state = {
      scrollY:new Animated.Value(0)
   }

2）在render()我内部渲染我想要动画的视图的高度。

const HeaderHeight = this.state.scrollY.interpolate({
      inputRange: [0, 100],
      outputRange: [100, 0],
      extrapolate: 'clamp'
    })

3）我这样设置我的标题：

  <Animated.View style={{width:'100%', height:HeaderHeight, backgroundColor:'transparent', justifyContent:'flex-end'}}>
 ...
  </Animated.View>

4）在滚动视图内：

<ScrollView
          scrollEventThrottle={16}
          onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }])}
          >

正如您slowly scroll the view在屏幕抖动时从 gif 文件中看到的那样。这发生在android中。在 ios 上它工作正常。

知道如何解决这个问题吗？

任何评论或建议都会非常有帮助:)

我正在对我scrollview的.slideimageBackground

我用来pagingEnabled滑动图像。index但是有没有办法让我每次刷卡时都能得到号码？

我正在使用滚动视图，如下面的代码。添加pagingEnabled将使滚动视图像 a 一样工作swiper，但我不知道如何获取index.

<ScrollView horizontal={true} pagingEnabled={true}>
            {this.createScrollImageSources(this.state.image)}
</ScrollView>